I have worked on angular 2 project and used angular-cli. I would like to replace all the css files with scss. what would be the easiest way to do it? Or is there a command line that can handle it without having do it manually.
Add a comment
|
3 Answers
I just had to do this to an existing project and pieced together a bunch of information from various places, mostly from this similar stackoverflow question. Here's a set of command line actions (that worked for me on Mac OSX)
# rename all your current files
find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
# change angular cli config file to include styles.scss instead of styles.css
sed -i -e 's/styles.css/styles.scss/g' .angular-cli.json
# now we need to go thru and fix up all the places where ts files refer to .css files
# there’s probably a better way (and will only work if you don’t have multiple css files in a component)
# this is what I did
find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g' {} +
rm -r *.ts-e
# fix for future generates styles
ng set defaults.styleExt scss
# Add node-sass npm module
npm install node-sass --save-dev
# or if you are using yarn, like me:
yarn add node-sass --dev
1 Comment
jmq
If you were sloppy when you ran the first command, and did it at the root of your project, you might have renamed some of your npm dependencies' files. If so, delete those dependencies and do
npm i to reinstall...Step1 :- Rename all css file from css (style.css) to scss (style.scss)
Step2 :- If you are using old version (till 4) than please check .angular-cli.json file and replace css to scss in below code "defaults": { "styleExt": "scss", "component": {} }
if you are using latest version (6) than please check angular.json
file and replace css to scss
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
And restart the project
Note :- For angular (till 4) basicall we used sass-loader to convert scss to css
but for latest version (6) we used node-sass to convert scss to css so if you are getting error like (Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version) than please use below command
npm rebuild node-sass
Comments
Yeah now I have to do this and add a step for sass-convert because angular decided to merge this in
https://github.com/angular/angular-cli/pull/13444
-.-
Thank you very much 'Alex Eagle'
