Error on importing scss files.

[Peeyush]

Hi,

I am evaluating the components now.

I initially imported the css files related to syncfusion grid and it was working, but when I want to import the scss files, the application fails to build and I get an error saying 

"File to import not found or unreadable: ej2-base/styles/bootstrap4-definition.scss."

I have imported the following files: 

@import '~@syncfusion/ej2-base/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-buttons/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-calendars/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-dropdowns/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-inputs/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-navigations/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-popups/styles/bootstrap4.scss';

@import '~@syncfusion/ej2-splitbuttons/styles/bootstrap4.scss';

@import "~@syncfusion/ej2-react-grids/styles/bootstrap4.scss";

Could you please check and point out what I am doing wrong.

[Manivel Sellamuthu]

Hi Peeyush, 

Thanks  for your interest in Syncfusion products. 

We suspect that scss files are not properly included your project. 

To include scss files in your project you need follow the below steps. Please find the steps: 

1. import the scss files from the node modules package in your App.scss file (eg: @import '../node_modules/@syncfusion/ej2-react-grids/styles/material.scss')
2. install the node-sass package using the command “npm install node-sass –save”
3. Include the  command  “npm run build-css” in your package.json file
4. After including run the command “npm run build-css” .
5. Now the styles will be extracted in the app.css files and you can include the css files into your project

We have prepared a basic sample for your convenience. Please find the below sample. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/scss_Grid117339608 

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

Regards, 

Manivel 

[Peeyush]

Hi Manivel,

Thank you for getting back to me. I will try that.

[Pavithra Subramaniyam]

Hi Peeyush, 

 

Thanks for your update. 

 

Please get back to us if you need nay further assistance on this. 

 

Regards, 

Pavithra S. 

[Robert]

Hi,

So I am not sure if I should start a new form topic or just add a comment here. So I am trying here first.

I am getting a similar issue when trying to import scss files. The first import is for the base styles, but I cannot get past this error:

App.scss

@import "@syncfusion/ej2-base/styles/bootstrap5";

Error output is:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 1 │ @import 'ej2-icons/styles/bootstrap5.scss'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@syncfusion\ej2-base\styles\bootstrap5.scss 1:9 @import src\App.scss 18:9 root stylesheet

The suggestion here was to install node-sass and add a npm script "build-css" which uses the --include-path argument for node-sass.

However node-sass has been depreciated in favor of Dart sass, as noted here: https://create-react-app.dev/docs/adding-a-sass-stylesheet

Since I am using react-scripts, I absolutely do not want to "eject" the scripts to get at the webpack config, to add in the additional paths for Dart sass.

Any help here to get these scss files loaded in React would be greatly appreciated!

[Joseph Christ Nithin Issack]

Hi Robert,

Greetings from Syncfusion support.

The issue you reported stems from an unconfigured "include path" in the application. This prevents the dependent scss package files from referencing the include path. To resolve it, add the SASS_PATH variable to a .env file in the root folder. Please follow these steps to configure the include path in a react-create-app application.  

Step 1 : Need to add a .env file at the project root folder with the variable SASS_PATH, please refer the below screen shot  

SASS_PATH=./node_modules/@syncfusion 

Screenshot:
  

  

  

Path added in the .env file:   

Step 2 : Since we have migrated from node sass to dart sass please install the following package by running the below command. 

Npm install sass --save 

The installed package will be added in package.json file. please refer the below screenshot.  

For your reference we have created a simple React sample with with scss file.  

Sample link :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/React_Scss-1446234032.zip 

Thanks,

Joseph I.

[Robert]

Hi Joseph,

Thank you for the reply. I knew about the SASS_PATH in a .env file. However using a relative path is also depreciated. This is the warning I get when using a relative path for SASS_PATH=./node_modules/@syncfusion:

WARNING in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.

Invalid dependencies may lead to broken watching and caching.

As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.

Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).

Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).

Globs: They are not supported. Pass absolute path to the directory as context dependencies.

The following invalid values have been reported:

 * "node_modules/"

 * "node_modules/@syncfusion"

 * "node_modules/@syncfusion/bootstrap/scss/_bootstrap.import.scss"

 * and more ...

webpack compiled with 1 warning

We currently treat all webpack warnings as errors, so we cannot use this solution because it will not pass our build tests for deployment.

Is there another way around this issue?

[Theveshwar Jayakumar]

Hi Robert,

Currently we are evaluating your reported issue at our end, but we need some additional time to validate on this issue so we will update you the further details on February 07, 2023.

 

Until then we appreciate your patience

 
Regards,

Theveshwar

 

[Jumpei Yamauchi]

We are trying to incorporate the Pivot table & Data grid component within a SharePoint Framework project and have been looking around the styling options.

We have tried following the article - https://ej2.syncfusion.com/react/documentation/appearance/theme.

- npm install @syncfusion/ej2

- add @import "./node_modules/@syncfusion/ej2/fabric.scss" in one of other sass files in our project

When trying to build the project, we are getting the following error:

SassError: File to import not found or unreadable: ej2-base/styles/fabric.scss

Just wondering if there are any updates on the above thread or anyone experiencing the similar issue with including the Syncfusion sass files in SharePoint Framework project.

[Theveshwar Jayakumar]

Hi Jumpei Yamauchi,

 

Sorry for the delay caused,

 

Thank you for reaching out to Syncfusion support. We have evaluated the scenario you reported and understand that you are facing difficulties while importing the scss styles in SharePoint framework, regarding this requirement we have explained on how to import themes for the Syncfusion components in various ways, such as using CSS or SASS styles from npm packages on SharePoint framework in the below documentation. Kindly refer to the below documentation link.

 

Link: https://ej2.syncfusion.com/react/documentation/getting-started/sharepoint#import-syncfusion-css-styles

 

If you require any further assistance or have additional questions, please feel free to let us know.

 

Regards,

Theveshwar