//Converting a Current App to Sass
ng set defaults.styleExt scss
//look at angular-cli.json
//You'll find the new config line at the bottom of the file:
"defaults": {
"styleExt": "scss",
"component": {
}
}
//Add your scss structure
|- src/
|- component/
|- general/
|- custom/
|- style.scss
//The last step is to update our .angular-cli.json config to use this new src/scss/styles.scss instead of the src/styles.scss. In our .angular-cli.json file, just change the following line to point to the right styles.scss.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
//remove styles.css and add the following new path/file
"scss/styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
//edit some classes and see it in action
ng serve -o