Executing Sass - Can't find stylesheet to import

[Colin Finger]

Hi :)

I'm currently trying to do the following:

So I import the base styles, then I override some scss variables, and then import the button styles. And in the runtime, this works fine. However, when I want to execute sass​ on this file (let's call it button.scss), it throws an error:

Error: Can't find stylesheet to import.

1 │ @use 'ej2-base/styles/material-definition.scss';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules\@syncfusion\ej2-buttons\styles\button\material.scss 1:1 @import
  node_modules\@syncfusion\ej2-buttons\styles\material.scss 1:9 @use
  assets\styles\button.scss 2:1 root stylesheet
error Command failed with exit code 65.

The reason I try to execute sass​ is, that I want to provide my developers with a compiled CSS file for the button control, that is based on Material but incorporates our design choices.

Can you help me? If you need any more information, please let me know.

With kind regards,
Colin Finger

[Gayathri KarunaiAnandam]

Hi Colin, 

We have shared the steps to create the sample for Essential JS 2 components in Angular using scss file. Please follow the below steps to resolve the SCSS file compilation issues.  

Step 1: Add the stylePreprocessorOptions with includePaths in the .angular.json to map the SCSS file path. These paths can used globally in the angular app, please find the below code snippet for further details.  

"stylePreprocessorOptions": {  

        "includePaths": [  

          ../node_modules/@syncfusion  

        ]  

      },  

  

Step 2: Now, you can use the Essential JS 2 scss  in the styles.scss location.  

@import "@syncfusion/ej2-base/styles/material.scss"; 

@import "@syncfusion/ej2-buttons/styles/material.scss"; 

For your convenience, we have created a button sample and the same can be download from the below link.  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-angular-app-8553571 

Please check the below documentation link. 

https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#adding-scss-reference 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[René Fabel]

Hello Gayathri,

your example works, but wenn I run the unit tests with "ng test" the following error appears:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

SassError: Can't find stylesheet to import.

@import 'ej2-icons/styles/material.scss';

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

node_modules\@syncfusion\ej2-base\styles\material.scss 1:9 @import

src\styles.scss 1:9 root stylesheet

Sincerly

René

[Gokulraj Varatharajan]

Hi Team,

Thanks for your update,

Currently, we are validating your query and we will update further details within two business days on or before 5^th May 2022.

We appreciate your patience until then.

Regards,

Gokul

[Gokulraj Varatharajan]

Hi Team,

Thanks for your patience,

We have validated your query and please add the below configuration setup in your angular.json file to resolve your reported issue at our end.

angular.json

"stylePreprocessorOptions": {

              "includePaths": ["node_modules/@syncfusion"]

 },

For your convenience, we have created a sample with this configuration which is working fine and can be downloaded and used from the following sample link.

Sample

Regards,

Gokul

[Gokulraj Varatharajan]

Hi Team,

Thanks for your patience,

We have validated your query and please add the below configuration setup in your angular.json file to resolve your reported issue at our end. It must be included in angular.json file in the “test” inside the options object.

angular.json

"stylePreprocessorOptions": {

              "includePaths": ["node_modules/@syncfusion"]

 },

For your convenience, we have created a sample with this configuration which is working fine and can be downloaded and used from the following sample link.

Sample

Regards,

Gokul

[René Fabel]

Thank you very mutch, that works on my side too.

Maybe it is a good idea to write that in the documentain too.

Regards

René

[Gokulraj Varatharajan]

Hi Team,

Thanks for your update,

Already we have considered this as a documentation improvement at our end and we will correct this documentation with any of our upcoming releases.

Please get back to us if you have any queries.

Regards,

Gokul

[Ragunath Sukumaran]

Hi Team,

We are glad to announce that our Essential Studio 2022 Volume 2 release v20.2.0.36 is rolled out. We have improvised our all documentation and included in this release.

Please refer the below documentation.

https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#adding-scss-reference

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Ragunath S