BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
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:
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!
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
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
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.rules.oneOf.use!./node_modules/postcss-loader/dist/cjs.js??ruleSet.rules.oneOf.use!./node_modules/resolve-url-loader/index.js??ruleSet.rules.oneOf.use!./node_modules/sass-loader/dist/cjs.js??ruleSet.rules.oneOf.use!./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:
* 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?
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