Search results

How to use SCSS File in Angular-CLI

30 Sep 2022 / 2 minutes to read

SASS Variables Location

The SASS variables for Essential JS 2 components are available in the following mentioned location.


For example, refer to the following location for navigation component’s SASS variable.


Initialization of SCSS Variables

Refer to the styles of the required component in the src/styles.scss file.

Copied to clipboard
@import “ej2-grids/styles/material.scss”

Configuring node SCSS in .angular-cli.json

To avoid SCSS compilation issues and to map the SCSS file path, add the stylePreprocessorOptions to the .angular-cli.json file.

Add the stylePreprocessorOptions option under apps in the .angular-cli.json file.

The following paths can be used globally in Angular app.

Copied to clipboard
"stylePreprocessorOptions": {
         "includePaths": [

An angular sample with SCSS compilation to render the Essential JS 2 Grid component can be downloaded from the following GitHub link.

How To Override Styles

In syncfusion Angular components, you can override control styles by replacing sass variable values like below:

Copied to clipboard
// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';

Angular-CLI Version 8 With SASS

In version 8, Angular Team moved away from node-sass in favour of sass.Nonetheless we have the option to use node-sass manually. Use the below command to install node-sass:

Copied to clipboard
npm install node-sass --save-dev