We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using SCSS Files Causes Compile Error

Hello, I have a problem trying to modify the scss variables to modify the theme, but this is causing a compilation error. I already tried to modify how you are in this link
even without success.

a similar sample project is attached as I'm trying to use.

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "ej2-base/styles/material.scss";
//@import "../node_modules/@syncfusion/ej2-buttons/styles/material.scss";
//@import "../node_modules/@syncfusion/ej2-popups/styles/material.scss";
//@import "../node_modules/@syncfusion/ej2-navigations/styles/material.scss";

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

Attachment: myapp_33947289.rar

3 Replies

JA Jesus Arockia Sankaran S Syncfusion Team December 12, 2018 12:51 PM UTC

Hi Adriano 

Thanks for your interest in Syncfusion. 

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-cli.json to map the SCSS file path. These path can used globally in the angular app, please find the below code snippet for further details.  

"stylePreprocessorOptions": {  
        "includePaths": [  
Step 2: Now, you could use the Essential JS 2 scss styles in the assets location 
Note: not required full path of sass file. You already declare the entry point of the sass file in “stylePreprocessOPtions 

@import "ej2-ng-dropdowns/styles/fabric.scss";  
Please, check out the following link, to know more details about angular project with sass 

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

Please get back to us if you require any further assistance on this. 
Jesus Arockia Sankaran S 

AN Adriano Nascimento December 14, 2018 07:05 PM UTC

thanks for answering
I managed to compile but I had to make some modifications.

-I have updated the Angular cli from 7.0.5 to 7.1.3 and
I modified the path of the stylePreprocessorOptions to "node_modules/@syncfusion"

I had to do it in the example project provided.

Is there any example project that will modify scss variables of the controls because I can not even use the variables available in

Thank you.

JA Jesus Arockia Sankaran S Syncfusion Team December 17, 2018 01:41 PM UTC

Hi Adriano, 
We have not yet documented the “custom variables for each components”. We have planned for documenting this which will be included  in volume 1, 2019 release.  
We suggest you to follow the below steps to modify scss variables of the components.  
Step 1: The sass variable are available for our components in below location 
node_modules/@syncfusion/package -name/styles/themename-definition.scss 
Example: node_modules/@syncfusion/ej2-ng-dropdowns/styles/fabric- definition.scss.scss 
We could override the SCSS variables after referring its definition file to achieve your requirement instead of adding !default flag to each variable.  
Code Snippet: 
$btn-font-size: 24px;   
 @import 'ej2-ng-buttons/styles/button/ material.scss';    
Please get back to us if you require any further assistance on this.  
Jesus Arockia Sankaran S 

Live Chat Icon For mobile
Up arrow icon