Using SCSS as Default Style Sheet in Angular 6+ (Styleext)

Using scss as default style sheet in Angular 6+ (styleExt)

The position on which this is set changed in the angular.json. There are 2 ways to set this option now.

Via the Angular CLI:

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

Directly in the angular.json:

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

Angular 9 Update:

Note that from Angular 9 onwards styleext is renamed to style. So we end up with:

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

and

"schematics": {
    "@schematics/angular:component": {
      "style": "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

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

Is it possible to have both css and scss in Angular

EDIT for Angular 6+

Found on GitHub page of Angular:

stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json though. Its new place is inside the "options" block of the json.

An example config could look like this:

"options": {
    "outputPath": "../webapp",
    "index": "src/index.html",
    "main": "src/main.ts",
    "tsConfig": "src/tsconfig.app.json",
    "polyfills": "src/polyfills.ts",
    "assets": [
        {
            "glob": "**/*",
            "input": "src/resources",
            "output": "/resources"
        },
    ],
    "styles": [
        "src/styles.scss"
    ],
    "stylePreprocessorOptions": {
        "includePaths": [
            "src/styles"
        ]
    },
    "scripts": []
}

Note the changed path.

ORIGINAL answer

Actually it just went fine out-of-the-box by having the "styleExt" set to "css". A bunch of components in a specific module were using SASS. I have a sass folder with variables and mixins and this setting in angular-cli.json was needed to have these scss files compiled / processed correctly:

"stylePreprocessorOptions": {
  "includePaths": [
    "sass"
  ]
}

The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style (css, scss, less) file generation when adding components via angular-cli commands.

Unable to get .scss instead of .css while generating new angular components

It's not like previous versions,

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

You need to replace the above lines with below code.

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

You can easily set the style while creating the project with below code.

ng new project_name --style=scss

---

Related Topics