How to Use Sass/Scss in Angular Application

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

Why is @use in my scss files not working in my Angular 9.1.0 project?

I have finally been able to solve this issue.

  • I upgraded to Angular version 10.0.8 by using the ng update tool as documented here
  • I removed node-sass as a dev dependency from my project

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.

Starting out with SASS, SCSS and Bootstrap in Angular project

Check that you have in angular.json:

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

and in package-lock.json:

"dependencies": {
...
"@angular-devkit/build-angular": {
...
"requires": {
....
"node-sass": "4.10.0",
"sass-loader": "7.1.0",
...
"node-sass": {
...
},
"sass-graph": {
...
},
"sass-loader": {
...
}

The versions are just for example, I just wrote how my config looks regarding SASS

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)


  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

How to use sass-loader in Angular?

Import .scss file into other .scss files

You can specify the .scss inside other .scss files using the relative path of your file inside the assets path.

Your default assets path should be

"assets": [
"src/favicon.ico",
"src/assets"
]

which is defined in the angular.json file.

Example:

  • You have an app.component.scss
  • Your theme.scss file is in ./src/assets/theme/theme.scss

Then you would import it inside app.component.scss like:

@import '../assets/theme/theme.scss';

Specify the style preprocessor option to shorten the import

If you want to shorten the path like you described, you just add the path to the stylePreprocessorOptions in the angular.json file:

"architect": {
"build": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"./src/assets/style/theme"
]
},
},
"test": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"./src/assets/style/theme"
]
}
}
}
}

Then you should be able to include your file like @import 'theme.scss';

  • For more insights read this: https://github.com/angular/angular-cli/wiki/stories-global-styles
  • Official documentation: https://angular.io/guide/workspace-config
  • Source that I used: How to short path to file in Angular?

Update after description changed

I suppose you set the wrong relative path. Therefore you need to set the stylePreprocessorOptions like that:

"includePaths": ["./src/lib"]

in build and test

After you set this, you can put in any theme file there and like:

./src/lib/theme.scss and import it like @import 'theme.scss';



Related Topics



Leave a reply



Submit