Angular-cli from css to scss

Css Problem Overview

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'(…)

Css Solutions

Solution 1 - Css

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: https://stackoverflow.com/questions/36220256/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

Solution 2 - Css

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"
  }
}

Solution 3 - Css

Open angular.json file

1.change from

"schematics": {}

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

2. change from (at two places)

"src/styles.css"

"src/styles.scss"

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

Solution 4 - Css

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

Solution 5 - Css

For Angular 6,

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

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

Solution 6 - Css

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

Solution 7 - Css

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

Solution 8 - Css

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

Solution 9 - Css

Use command:

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

Solution 10 - Css

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

Solution 11 - Css

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

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

Solution 12 - Css

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

Solution 13 - Css

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.

Solution 14 - Css

For Angular 11+

Manually change in angular.json.

Replace the "schematics": {},

with

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

Solution 15 - Css

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

Solution 16 - Css

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.

Solution 17 - Css

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Jamie	View Question on Stackoverflow
Solution 1 - Css	Chic	View Answer on Stackoverflow
Solution 2 - Css	Jose Orihuela	View Answer on Stackoverflow
Solution 3 - Css	BALA	View Answer on Stackoverflow
Solution 4 - Css	Partha Ranjan	View Answer on Stackoverflow
Solution 5 - Css	Franklin Pious	View Answer on Stackoverflow
Solution 6 - Css	veben	View Answer on Stackoverflow
Solution 7 - Css	Angel Roma	View Answer on Stackoverflow
Solution 8 - Css	white_shadow	View Answer on Stackoverflow
Solution 9 - Css	himanshu sharma	View Answer on Stackoverflow
Solution 10 - Css	mahsa k	View Answer on Stackoverflow
Solution 11 - Css	Jameson Saunders	View Answer on Stackoverflow
Solution 12 - Css	tilo	View Answer on Stackoverflow
Solution 13 - Css	Frank Thoeny	View Answer on Stackoverflow
Solution 14 - Css	Cipher	View Answer on Stackoverflow
Solution 15 - Css	syed	View Answer on Stackoverflow
Solution 16 - Css	Janos Vinceller	View Answer on Stackoverflow
Solution 17 - Css	Mohan	View Answer on Stackoverflow