Including your SASS files into our scss files is not working

Question

Hey there, we are currently evaluating your controls, but we can't inport your scss files for the ej2-base, as mentioned in "theming" (https://ej2.syncfusion.com/16.1.37/angular/documentation/common/theme.html). If we import your base sass, no styles are applied:If we use the control related sass files, the application crashes:Our angular-cli.json:,
      "stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/@syncfusion/ "
        ]
      }
Import in our main style scss:@import "~@syncfusion/ej2-dropdowns/styles/bootstrap.scss";
In your example under themeing you're refering to @syncfusion/ej2/Which is not available in your node_modules. Our installed versions:"@syncfusion/ej2-ng-dropdowns": "16.1.40",
    "@syncfusion/ej2-ng-grids": "16.1.41",

Marco Franke · Answer

Is there any way to use your scss.files or did somebody achieved it? We need to style the entire bootstrap colors and so on.

Saranya Murugasamy · Answer

Hi Marco, 

Thanks for your interest in Essential JS 2. 

Query 1: we can't inport your scss files for the ej2-base, as mentioned in "theming" (https://ej2.syncfusion.com/16.1.37/angular/documentation/common/theme.html). If we import your base sass, no styles are applied: 

We would like to let you know that, the ej2-base have common styles for the Essential JS 2 components and it doesn’t have the component’s styles, so that the component is rendered without styles. 

Query 2: If we use the control related sass files, the application crashes 

We have shared the steps to create the sample for Essential JS 2 components in Angular using scss file. 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: Since the includePaths is mapped from the app folder, we have to set the path value as ../node_modules/@syncfusion and also set the styleExt as scss in the .angular-cli.json. 

“defaults": { 
    "styleExt": "scss", 
          "component": {} 
      }  

Step 3: Now, you can use the Essential JS 2 scss styles in the assets location. 

@import "ej2-ng-dropdowns/styles/fabric.scss"; 


Step 4:Add your custom style files in the .angular-cli.json. 

"styles": [ 
        "styles.css", 
        "assets/default.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/directtrac/general/ze/angular-sass-sample1709824561.zip 

Query 3: In your example under themeing you're refering to @syncfusion/ej2/ 
 
We would like to let you know that, the @syncfusion/ej2 package have all Essential JS 2 components script and styles. So it can be useful to add a single package to get all Essential JS 2 component styles in the application. 

Please let us know if you have any concerns. 

Regards, 
Saranya Murugasamy

Marco Franke · Answer

Hello Sarany,thank you for your detailed reply. We've just discovered our fail. We imported the scss files via:@import "~@syncfusion/ej2-dropdowns/styles/bootstrap.scss";
We removed the "~@syncfusion/" and now it works :)You can close this issue.

Sridurgha Uthayakumaran · Answer

Hi Marco, 

We are glad to hear that you have resolved the issue in your end. Please get back to us if you need any further assistance. 
 
Regards, 
Sridurgha U