Angular CLI SASS options
Angular CLI version 9 (used to create Angular 9 projects) now picks up
style
from schematics instead ofstyleext
. 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:
- Change the default style extension to
scss
Manually change in
.angular-cli.json
(Angular 5.x and older) orangular.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)
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
inangular.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
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
How to Set Bootstrap Col for Small Display Sizes
How to Include "Leaflet.CSS" in a React App with Webpack
Using HTML Attributes as CSS Property Values
How to Simply Add a CSS File to Change The Background Color for My Shiny App
Position:Fixed in Windows Phone 7
Background Image Width Not 100% on Ipad
Perfect Infinite Rotation for ֍ Character
Move The Vertical Scroll Bar of a Scroll Panel to The Left Side
Space at Bottom of Div Containing Image
CSS: Table and Table-Cell Replacement for Ie7
CSS Change Border Color on Hover
How to Break Lines in Urls in Stylesheet
Why Doesn't Blur(0) Remove All Text Blur in Webkit/Chrome on Retina Screens
CSS Floats and Its Stack Order
How to Make Sidebar with Same Height as The Content Div