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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using SCSS Files Causes Compile Error

Thread ID:

Created:

Updated:

Platform:

Replies:

141429 Dec 11,2018 11:45 AM UTC Dec 17,2018 01:41 PM UTC Angular - EJ 2 3
loading
Tags: General
Adriano Nascimento
Asked On December 11, 2018 11:45 AM UTC

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 [Syncfusion]
Replied On 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": [  
          "../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 



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. 
 
Regards,  
Jesus Arockia Sankaran S 


Adriano Nascimento
Replied On 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
https://ej2.syncfusion.com/angular/documentation/appearance/theme/

Thank you.

Jesus Arockia Sankaran S [Syncfusion]
Replied On 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.  
 
Regards,  
Jesus Arockia Sankaran S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;