How to use SCSS in Angular CLI

5 Apr 20251 minute to read

Sass (SCSS) is a powerful CSS pre-processor that significantly enhances your styling capabilities with features like variables, nested rules, and functions. This guide will walk you through integrating SCSS into Angular CLI for customizing the styles of your Syncfusion^® Angular components.

SASS variables location

SASS variables corresponding to Essential^® JS 2 components are located at:

node_modules/@syncfusion/package-name/styles/themename.scss

For example, to access SASS variables for the Navigation component, use:

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

Initialization of SCSS variables

To incorporate SCSS variables into your project, import the required component styles into the src/styles.scss file:

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

Configuring Node-Sass in Angular CLI json

To avoid SCSS compilation issues and to map the SCSS file path, you need to add the stylePreprocessorOptions to the .angular-cli.json file. You should add this option in two places under the apps object,

1. angular-cli.json -> {}build -> {}options
2. angular-cli.json -> {}test -> {}options

This setup allows global path resolution for SCSS files in your Angular application:

"stylePreprocessorOptions": {
         "includePaths": [
         "node_modules/@syncfusion"
        ]
  },

A sample Angular project demonstrating SCSS compilation with Essential^® JS 2 Grid component is available on GitHub.

Overriding styles

To customize Syncfusion^® Angular component styles, override default SASS variable values as illustrated below:

// 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, the Angular Team moved away from node-sass in favor of sass. However, you can still use node-sass manually by running the following command:

npm install node-sass --save-dev

By following the guidelines in this document, you can effectively use SCSS within Angular CLI to tailor the styles of your Essential^® JS 2 components.