Using SCSS Files Causes Compile Error

[Adriano Nascimento]

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

https://www.syncfusion.com/forums/137568/including-your-sass-files-into-our-scss-files-is-not-working

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

[Jesus Arockia Sankaran S]

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": [  

          "../node_modules/@syncfusion"  

        ]  

      },  

  

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 

https://github.com/SyncfusionExamples/ej2-angular-scss 

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

http://www.syncfusion.com/downloads/support/forum/141429/ze/ACCORD~11271881885.zip 

 

Please get back to us if you require any further assistance on this. 

 

Regards,  

Jesus Arockia Sankaran S 

[Adriano Nascimento]

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

https://ej2.syncfusion.com/angular/documentation/appearance/theme/

Thank you.

[Jesus Arockia Sankaran S]

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.  

 

Regards,  

Jesus Arockia Sankaran S