Angular-Cli from CSS to Scss

Angular-cli from css to scss

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)

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

3. Point the CLI to find styles.scss

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

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

How can i change already generated angular app with css stylesheet - to use scss

Use the following command to change angular config

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

and open angular.json file

Change your

"schematics": {}

to

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

change from (at two places)

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

to

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

Then change manually all you component .css to .scss and change in the .ts files as follows in config

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})

and then create a component it will create .scss file as you expected

Angular CLI SASS options

Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this:

ng config schematics.@schematics/angular:component.style scss
and the resulting angular.json shall look like this

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

Other possible solutions & explanations:


To create a new project with angular CLI with sass support, try this:

ng new My_New_Project --style=scss 

You can also use --style=sass & if you don't know the difference, read this short & easy article and if you still don't know, just go with scss & keep learning.

If you have an angular 5 project, use this command to update the config for your project.

ng set defaults.styleExt scss

For Latest Versions

For Angular 6 to set new style on existing project with CLI:

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

Or Directly into angular.json:

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

Telling Angular to serve `styles.css` instead of `styles.scss`

Edge

When you open up styles.scss by clicking on it in the styles tab of your devtools in Edge, you can just select the format you want in the tabs above the stylesheet it presents to you. I you can't see it you can click the >> arrows to show the option in a dropdown.

However, you will only see the global styles there. Not the component styling.

Click on the styles.scss on the right:

Select whatever presentation you prefer in the tabs:

Chrome

Go to devtools settings and disable CSS sourcemaps. (Second column, next to last check mark.)

Now you will see styles.css only in the right of your styles tab.

How do I tell Angular 14 CLI to create SCSS Files?

Make sure you set scss as the default style format in your angular.json file like so:

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

Now when you generate a component, a scss file should be created.

---

Related Topics