scss unable to find stylesheet.

1 Reply
2 Participants

Created by
JA James

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
DropDownList

Created On
Feb 19, 2022 03:47 AM UTC

Last Activity On
Feb 21, 2022 01:36 PM UTC

Want to subscribe?
SIGN IN

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';

1 Reply

VJ Vinitha Jeyakumar Syncfusion Team February 21, 2022 01:36 PM UTC

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';