212

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'(…)
Improve this question
7
  • 1
    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. Commented Nov 21, 2016 at 17:38
  • 1
    But I've no files yet. Just want to switch. Commented Nov 21, 2016 at 17:40
  • how do you have no files yet? If you're creating a new project, why are you configuring it that way? Commented Nov 21, 2016 at 17:41
  • 1
    Just starting with angular2. I'm trying to figure it all out. Commented Nov 21, 2016 at 17:42
  • 1
    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! Commented Nov 21, 2016 at 17:45

17 Answers 17

Reset to default
371

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:

  1. 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)

  1. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

  2. Point the CLI to find styles.scss

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

  1. 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
Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

EDIT: I just needed to refresh the real-time builder. It works correctly
ng set defaults.styleExt scss for existing projects
for angular 6 follow this github.com/angular/angular-cli/wiki/stories-css-preprocessors
@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
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
|
76

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"
  }
}
Improve this answer

8 Comments

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, yes that is how mine is setup as well, and it is working.
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.
After updating to ng6 latest versions my schematics is now nested as well.
That doesn't seem to change anything for me. Still not processing scss rules in .css files.
|
53

Open angular.json file

1.change from

"schematics": {}

to

"schematics": {
           "@schematics/angular:component": {
                   "styleext": "scss"       
             }  
  }
  1. 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

Improve this answer

2 Comments

Step 1 can be done from CLI: ng config schematics.@schematics/angular:component.styleext scss as specified in official docs: github.com/angular/angular-cli/wiki/stories-css-preprocessors
If you're on Angular v9 or greater, see this answer: stackoverflow.com/a/61782667/2506393
44

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
Improve this answer

4 Comments

is not working for me and i'm trying to do it over 10
Angular 10 here, works. Notice the difference of "styleext" and "style" in this answer
This still works for Angular 14, took me quite a while to find it since most answers use styleext as @Pierre pointed out
Most accurate answer now. This one worked with angular 14. ng set seems deprecated. ng config defaults.styleExt=scss didn't work for me.
22

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:

  1. Rename all the stylesheets in the src folder recursively.
  2. Alter the styleUrls in respective component classes to point to the new file names for stylesheets.
  3. Updates the component styles schematics value in the angular.json file or creates one if the schematic does not exist, and
  4. 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

Improve this answer

3 Comments

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).
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.
I am using angular 9, this is working fine for me, btw I had to downgrade node-sass package btw to 4.0.0.
16

For existing projects:

In angular.json file

  1. In build part and in test part, replace:

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

  2. 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

Improve this answer

Comments

14

For Angular 6,

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

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

Improve this answer

Comments

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

Improve this answer

2 Comments

Invalid JSON character: "s" at 0:0.
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!
8

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

Improve this answer

2 Comments

Thanks! It helped me to choose the from and to style format that's it! I didn't rename it manually.
I tried this command in the angular18 project. it automatically renames all my css files and angular.json is updated automatically. work like a charm
7

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

Improve this answer

2 Comments

Looks same as stackoverflow.com/a/67903727/4826457 and stackoverflow.com/a/69110323/4826457
@SurajRao Yes, I looks similar and even the answers which you have mentioned is similar to stackoverflow.com/a/61782667/11983640.
6

Use command:

ng config schematics.@schematics/angular:component.styleext scss
Improve this answer

Comments

6

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.

Improve this answer

Comments

4

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

  1. Open this file: app.component.ts

  2. Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']

  3. Save and close.

In the same folder src/app

  1. Rename the extension for the app.component.css file to (app.component.scss)

  2. 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.

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

  2. 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.

Improve this answer

Comments

3

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

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

Comments

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

Improve this answer

Comments

3

For Angular 11+

Manually change in angular.json.

Replace the "schematics": {},

with

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

Comments

-1

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.