scss unable to find stylesheet.

[James]

I created the sample app from the youtube video for the dropdownlist and using css it compiles cleanly.

When I tried creating a dropdownlist with scss I get an error that it can't find the stylesheet. The error occurs when it tries to execute the @import statement in the scss subfolder.

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

SassError: Can't find stylesheet to import.

╷

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

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

╵

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

src/styles.scss 2:9 root stylesheet

This is the styles.scss file

/* You can add global styles to this file, and also import other style files */

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

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

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.scss';

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.scss';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.scss';

@import '../node_modules/@syncfusion/ej2-lists/styles/material.scss';

@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.scss';

This is the content of the node_modules>@syncfusion>ej2-base>styles.material.scss file

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

@import 'material-definition.scss';

@import 'all.scss';

The error occurs when trying to resolve the first line

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

[Vinitha Jeyakumar]

Hi James,

We have shared the steps to create the sample for Essential JS 2 components in Angular using scss file for styling. 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 be used globally in the angular app, please find the below code snippet for further details.  

"stylePreprocessorOptions": {  

              "includePaths": [  

                "node_modules/@syncfusion"  

              ]  

      },  

 

Step 2: Now, you could use the Essential JS 2 scss styles in the app.component.scss file

 

Note: not required full path of sass file. You already declare the entry point of the sass file in “stylePreprocessOPtions”

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

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

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

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

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

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

@import 'ej2-angular-dropdowns/styles/material.scss';

Please, check out the following link, to know more details about angular project with sass

https://github.com/SyncfusionExamples/ej2-angular-scss

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Ang_SASS-1152208250

Please check the below documentation for further details,
https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#adding-scss-reference

Regards,

Vinitha