Angular-cli from css to scss

Question

I've read the documentation, which says that if I want to use scss I have to run the following command:

ng set defaults.styleExt scss

But when I do that and make that file, I still receive this error in my console:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

That will only work for files you generate from that point, I don't think it will fix the ones you already have. If you `git diff` you will see what it's changed. — jonrsharpe, Nov 21 '16 at 17:38
how do you have no files yet? If you're creating a new project, why are you configuring it that way? — jonrsharpe, Nov 21 '16 at 17:41
Just starting with angular2. I'm trying to figure it all out. — Jamie, Nov 21 '16 at 17:42
If you're creating a new project, do `ng new whatever --style=scss` **as shown in the docs**. Don't follow the instructions for configuring an existing project if that isn't what you're doing! — jonrsharpe, Nov 21 '16 at 17:45
get/set have been deprecated in favor of the config command. — chovy, Jun 13 '18 at 07:16
even for an existing project I'd probably just create a new one with the desired settings, overwrite my current project's config files with the newly generated ones and check the diffs for changes I want to keep — jemand771, Nov 02 '22 at 09:06

score 367 · Accepted Answer · edited May 26 '20 at 09:02

367

For Angular 6 check the Official documentation

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

For existing projects

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:
ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

ng config schematics.@schematics/angular:component.styleext scss

(*source: Angular CLI SASS options)

Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)
Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

edited May 26 '20 at 09:02

BuZZ-dEE

6,075
12
66
96

answered Jul 22 '17 at 13:49

Chic

9,836
4
33
62

6

EDIT: I just needed to refresh the real-time builder. It works correctly – Christian Vincenzo Traina Aug 26 '17 at 12:11
Just a helper note use url for importing remote styles in scss version : like this : @import url("https://fonts.googleapis.com/css?family=Material+Icons"); – Ali mohammadi Jan 08 '18 at 05:59
2

@angular/cli 1.7.3: changing defaults.styleExt from `css` to `scss` in `.angular-cli.json` will automatically create scss files for every new component generated in the future. – SimonHawesome Mar 28 '18 at 21:53
4

ng set defaults.styleExt scss for existing projects – smedasn Apr 10 '18 at 21:41
I'm using the new Angular 5 template with .NET core 2.1 preview. When I did these steps, I get the following results in my browser: "Cannot GET /" I don't seem to get any console errors, nor any compile errors. – Starfleet Security Apr 18 '18 at 00:40
Angular6: you'll find "angular.json" instead of ".angular-cli.json" - the steps defined above are the same – Akber Iqbal May 07 '18 at 05:48
9

for angular 6 follow this https://github.com/angular/angular-cli/wiki/stories-css-preprocessors – hamilton.lima Jun 01 '18 at 20:06
`$ ./node_modules/.bin/ng config defaults.styleExt=scss` Value cannot be found. – chovy Jun 13 '18 at 07:17
22

@chovy for latest angular cli version, in my case(6.0.7) use this command for existing projects: `ng config schematics.@schematics/angular:component.styleext scss` as told by @hamilton.lima – Farhan Jun 14 '18 at 11:20
1

For renaming existing css files, 1. Install renamer `npm i -g renamer` 2. Change directory to src and run command `renamer --path-element ext --find css --replace scss "**"` – 20B2 Sep 08 '20 at 14:59
I can confirm this still works with angular `11.2.3` migration from css to scss using material. – nck Apr 17 '21 at 12:12
20

With Angular 12 you'll get `Data path "/schematics/@schematics~1angular:component" must NOT have additional properties(styleext)` - Use `ng config schematics.@schematics/angular:component.style scss` instead – BackSlash Oct 13 '21 at 08:51

score 73 · Answer 2 · edited May 07 '18 at 20:44

73

As of ng6 this can be accomplished with the following code added to angular.json at the root level:

Manually change in .angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

edited May 07 '18 at 20:44

Paul Roub

36,322
27
84
93

answered May 07 '18 at 20:35

Jose Orihuela

897
6
6

1

I have `schematics` not at the root level but nested inside my project in `angular.json`. Should I ignore that and add this at the root level instead? – mcheah May 16 '18 at 22:20
2

@mcheah, yes that is how mine is setup as well, and it is working. – Eric Soyke May 30 '18 at 14:12
1

I left mine nested inside the project and it looks like that's working fine too, just as an FYI for anyone who has the same question. – mcheah May 30 '18 at 16:04
After updating to ng6 latest versions my `schematics` is now nested as well. – Jose Orihuela May 30 '18 at 20:18
That doesn't seem to change anything for me. Still not processing scss rules in .css files. – chovy Jun 13 '18 at 07:23
it's working. By default project creation time it will be "schematics": {}. we ahve to add like below post – gnganapath Jan 11 '19 at 11:55
How do you then deal with the `"styles": [ "src/styles.css" ],` part? Do you manually change it to `src/styles.scss` and then also rename the file itself? – Cleb Jan 27 '19 at 21:01

score 50 · Answer 3 · answered May 30 '18 at 14:41

50

Open angular.json file

1.change from

"schematics": {}

to

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }

change from (at two places)

"src/styles.css"

to

"src/styles.scss"

then check and rename all .css files and update component.ts files styleUrls from .css to .scss

answered May 30 '18 at 14:41

BALA

1,170
1
12
13

4

Step 1 can be done from CLI: `ng config schematics.@schematics/angular:component.styleext scss ` as specified in official docs: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors – Marian07 Jul 01 '18 at 19:14
1

If you're on Angular v9 or greater, see this answer: https://stackoverflow.com/a/61782667/2506393 – nedstark179 Jul 15 '22 at 16:26

score 38 · Answer 4 · edited May 26 '20 at 09:43

38

In latest version of Angular (v9), below code needs to add in angular.json

  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Could be added using the following command:

ng config schematics.@schematics/angular:component.style scss

edited May 26 '20 at 09:43

BuZZ-dEE

6,075
12
66
96

answered May 13 '20 at 18:55

Partha Ranjan Nayak

479
6
7

is not working for me and i'm trying to do it over 10 – Kross Jul 29 '20 at 23:39
3

Angular 10 here, works. Notice the difference of `"styleext"` and `"style"` in this answer – Pierre Nov 06 '20 at 06:16
1

This still works for Angular 14, took me quite a while to find it since most answers use `styleext` as @Pierre pointed out – Thiemo Sep 01 '22 at 08:34
Most accurate answer now. This one worked with angular 14. `ng set` seems deprecated. `ng config defaults.styleExt=scss` didn't work for me. – Shahryar Saljoughi Apr 14 '23 at 14:17

score 16 · Answer 5 · answered Mar 04 '21 at 12:07

16

First install in your project:

npm i --save-dev schematics-scss-migrate

In your Angular CLI project:

run below command:

ng g schematics-scss-migrate:scss-migrate

Above command will do the following in the consuming project:

Rename all the stylesheets in the src folder recursively.
Alter the styleUrls in respective component classes to point to the new file names for stylesheets.
Updates the component styles schematics value in the angular.json file or creates one if the schematic does not exist, and
Renames all styles.css references to styles.scss in the angular.json file.

I have tried this on my angular 9 project and it worked...no need for extra efforts for renaming files... just enter the command and BOOM!!! now your project is migrated to scss project.

refer: https://www.npmjs.com/package/schematics-scss-migrate

answered Mar 04 '21 at 12:07

abhijeet_shela

327
2
7

how is your answer different from the ones already given? I'd recommend you improve an existing one by editing it (if you have the edit right). – jasie Mar 04 '21 at 12:40
1

I am on Angular 12, and this answer is the best for me, just two commands and boom, everything is done!. @jasie his answer is different in the sense that if you have hundreds of components and stylesheets you don't have to do so manually as that would be a huge pain, you simply run two commands from the terminal and all changes are made instantly. – Kingston Fortune Sep 19 '21 at 00:30
I am using angular 9, this is working fine for me, btw I had to downgrade `node-sass` package btw to 4.0.0. – Syed Umer Hasan Nov 21 '21 at 08:08

score 15 · Answer 6 · answered Nov 03 '19 at 11:03

For existing projects:

In angular.json file

In build part and in test part, replace:

"styles": ["src/styles.css"], by "styles": ["src/styles.scss"],
Replace:

"schematics": {}, by "schematics": { "@schematics/angular:component": { "style": "scss" } },

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

In your project rename your .css files to .scss

For a new project, this command do all the work:

ng n project-name --style=scss

For global configuration

New versions seems to not have a global command

score 14 · Answer 7 · answered Jun 25 '18 at 09:37

14

For Angular 6,

ng config schematics.@schematics/angular:component.styleext scss

note: @schematics/angular is the default schematic for the Angular CLI

answered Jun 25 '18 at 09:37

Franklin Pious

3,670
3
26
30

score 12 · Answer 8 · answered May 24 '18 at 00:45

12

CSS Preprocessor integration for Angular CLI: 6.0.3

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

ng config schematics.@schematics/angular:component.styleext scss

Angular CLI Documentation for all major CSS preprocessors

answered May 24 '18 at 00:45

Angel Roma

407
4
9

1

`Invalid JSON character: "s" at 0:0.` – chovy Jun 13 '18 at 07:23
As of Angular CLI 6.0.8 `ng config` (as above) is the best method BUT you still need to rename `*.css` files to `*.scss` AND replace references in `angular.json` to `style.css` with `style.scss` AND update all component file references in `styleUrls` property to the new names. ... then it works great! – gkl Jun 21 '18 at 11:57

score 6 · Answer 9 · edited Aug 25 '18 at 06:02

6

Use command:

ng config schematics.@schematics/angular:component.styleext scss

edited Aug 25 '18 at 06:02

Stephen Rauch

47,830
31
106
135

answered Aug 25 '18 at 05:42

himanshu sharma

101
1
3

score 5 · Answer 10 · edited Dec 07 '21 at 12:57

5

A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate. this package renames all css files to scss files :

ng add schematics-scss-migrate

https://github.com/Teebo/scss-migrate#readme

edited Dec 07 '21 at 12:57

Julian

886
10
21

answered Nov 15 '20 at 08:09

mahsa k

555
6
9

score 5 · Answer 11 · answered Sep 08 '21 at 22:28

There's obviously more than one ways to do this, but with the recent versions of angular I got another schematics value which I wanted to preserve. Because of this other value the command ng config schematics.@schematics/angular:component.styleext scss failed for me, so I took the new value and entered it myself in angular.json. This is the new value you have to enter:

        "@schematics/angular:component": {
          "style": "scss"
        }

And angular.json looks like this at the end:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "yourapp": {
      ...
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        },
        "@schematics/angular:component": {
          "style": "scss"
        }
...

Then you'll have to

rename all the css files to scss and
change all the references in your files to those.

You should be done with those steps.

score 5 · Answer 12 · edited Nov 16 '21 at 12:07

5

manually change the below code in "angular.json" which will be at the end of the file.

"schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  }

Kindly rename the files from .css to .scss and change all the references to the same

edited Nov 16 '21 at 12:07

Suraj Rao

29,388
11
94
103

answered Nov 16 '21 at 12:02

syed

606
8
11

Looks same as https://stackoverflow.com/a/67903727/4826457 and https://stackoverflow.com/a/69110323/4826457 – Suraj Rao Nov 16 '21 at 12:07
@SurajRao Yes, I looks similar and even the answers which you have mentioned is similar to https://stackoverflow.com/a/61782667/11983640. – syed Apr 11 '22 at 08:04

score 4 · Answer 13 · answered Jan 31 '19 at 01:59

A brute force change can be applied. This will work to change, but it's a longer process.

Go to the app folder src/app

Open this file: app.component.ts
Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']
Save and close.

In the same folder src/app

Rename the extension for the app.component.css file to (app.component.scss)
Follow this change for all the other components. (ex. home, about, contact, etc...)

The angular.json configuration file is next. It's located at the project root.

Search and Replace the css change it to (scss).
Save and close.

Lastly, Restart your ng serve -o.

If the compiler complains at you, go over the steps again.

Make sure to follow the steps in app/src closely.

score 3 · Answer 14 · answered Aug 16 '18 at 19:08

3

In ng6 you need to use this command, according to a similar post:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

answered Aug 16 '18 at 19:08

Jameson Saunders

95
6

score 3 · Answer 15 · answered Jan 09 '19 at 13:47

3

For users of the Nrwl extensions who come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.

The command to get SCSS working in an Nx workspace:

ng config schematics.@nrwl/schematics:component.styleext scss

answered Jan 09 '19 at 13:47

tilo

14,009
6
68
85

Brilliant, was looking for this. Thank you! – Ruan Petersen Jan 18 '19 at 07:23

score 3 · Answer 16 · answered Jun 09 '21 at 12:00

3

For Angular 11+

Manually change in angular.json.

Replace the "schematics": {},

with

  "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },

answered Jun 09 '21 at 12:00

Cipher

99
6

score -1 · Answer 17 · answered Jan 28 '22 at 11:27

-1

for angular version 12 Just rename styles.css file to styles.scss and update angular.json src/styles.css to src/styles.scss

answered Jan 28 '22 at 11:27

Mohan

747
6
8

Angular-cli from css to scss

17 Answers17

For existing projects

For future projects

Linked