I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.
I need to know the best way to handle SASS in a new Angular project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.
It didnt work but than again not sure if I just misconfigured something.
Also, what is the best way to organize styles in a new Angular project? It would be nice to have the sass file in the same folder as the component.
Angular CLI version 9 (used to create Angular 9 projects) now picks up
stylefrom 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"
}
}
When generating a new project with Angular CLI, specify the css pre-processor as
Use SCSS syntax
ng new sassy-project --style=scss
Use SASS syntax
ng new sassy-project --style=sass
Set default style on an existing project by running
Use SCSS syntax
ng config schematics.@schematics/angular:component.styleext scss
Use SASS syntax
ng config schematics.@schematics/angular:component.styleext sass
The above command will update your workspace file (angular.json) with
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
where styleext can be either scss or sass as per the choice.
Quoted from Officials github repo here -
To use one just install for example
npm install node-sassand rename .css files in your project to .scss or .sass. They will be compiled automatically. The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors.
See here