EJ2 - Webpack Styles

Question

I've been struggling for a very long time now to get styles to work in webpack. For some reason referencing the .css file does not import the css. Referencing the .scss gives even more problems.

Referring to this question, I have the same situation:

https://www.syncfusion.com/forums/165499/scss-webpack-typescript-examples

However, the solution is not working for me.

I basically have a index.scss file referencing .scss for all my libraries. Then I import that index.scss file in my main index.js file.

It works fine for my other libraries such as Bootstrap4:

@import "bootstrap/scss/bootstrap";
@import "@syncfusion/ej2/bootstrap4";

However building this webpack with the suncfusion included, I get the following errors:

1 │ @import "ej2-base/styles/bootstrap4.scss";

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

╵

node_modules\@syncfusion\ej2\base\bootstrap4.scss 1:9 @import

node_modules\@syncfusion\ej2\bootstrap4.scss 4:9 @import

sass\index.scss 2:9 root stylesheet

It's obvious that the .scss files referenced in the ej2-base file for some reason are incorrectly processed (their locations). Thus those files cannot be found and the build fails.

I'm not exactly sure how to solve this problem. Any advice will be appreciated.

ceds · Accepted Answer

Thanks, that solved my problem.  However, the loader settings should look as follows:{          loader: "sass-loader",          options: {            sassOptions: {              includePaths: ["./node_modules/@syncfusion"]            },          },        }

Gokulraj Varatharajan · Answer

Hi Franco, 

Greetings from Syncfusion support, 

We would like to let you know that currently we are validating your query and we will update further details within two business days on 24th November 2021. 

We appreciate your patience until then. 

Regards, Gokul

Gokulraj Varatharajan · Answer

Hi Franco,  
 
Sorry for the inconvenience caused, 
 
We have validated your query and would like to let you know that we are unable to replicate the reported issue at our end and we suspect that you haven’t provide the includePaths for sass loader in webconfig.js file. If you have use node-sass , you have to provide this otherwise you will get a script error.  
 




  {  
            loader: "sass-loader",  
              options: {  
              includePaths: [./node_modules/@syncfusion]  
            }  
    }  
  
Please let us know if you have any concern.  
 
Regards,  Gokul

Gokulraj Varatharajan · Answer

Hi Franco, 

We are happy to hear that the provided solution met your expected requirement. Please, let us know if you need any other assistance. We will be happy to assist you 

Regards, Gokul