Angular CLI add SASS after the project has been created

Question

I have an Angular 4 project created using the Angular CLI.

I know that when you are using the Angular CLI you can create a project that uses SASS like this:

ng new ProjectName --style=sass

My question is: "Can I use the Angular CLI to install SASS after a project has been already created without it?"

Possible duplicate of [Angular CLI SASS options](https://stackoverflow.com/questions/36220256/angular-cli-sass-options) — Kirk Larkin, Sep 28 '17 at 20:19

score 1 · Accepted Answer · answered Sep 28 '17 at 20:20

1

You can set it to style with ng set after installing node-sass

npm install node-sass --save-dev 

ng set defaults.styleExt scss

Taken from here: Angular CLI SASS options

answered Sep 28 '17 at 20:20

andrewgi

620
1
7
22

there is no reason to run `npm install node-sass --save-dev` as `node-sass` just gets installed by default and not listed in `package.json` file – angularrocks.com Sep 28 '17 at 22:29

score 0 · Answer 2 · answered Sep 28 '17 at 20:20

0

You can use node-sass, install it by running the following command:

npm install node-sass --save-dev

Then, if you want to use SASS syntax, run:

ng set defaults.styleExt sass

It should do the trick.

answered Sep 28 '17 at 20:20

P.S.

15,970
14
62
86

score 0 · Answer 3 · answered Sep 28 '17 at 20:21

Using Angular CLI - just do

ng set defaults.styleExt scss

All new components will use SCSS not CSS. Though if you just want to start using SCSS - changing existing .css files to .scss files will work. The relevant compiler is already present batteries included

score 0 · Answer 4 · answered Sep 28 '17 at 20:48

if you want to do it manually you can also do that by changing the angular cli configuration file

in your .angular-cli.json change style css to scss

  "defaults": {
    "styleExt": "scss"
  }

And then install node-scss to compile your scss files

npm install node-sass --save-dev

Angular CLI add SASS after the project has been created

4 Answers4