Konvertieren aller CSS-Dateien zu scss in Winkel 2

Question

Ich habe an Winkel 2 Projekt gearbeitet und Winkel-CLI verwendet. Ich möchte alle CSS-Dateien mit scss ersetzen. Was wäre der einfachste Weg, es zu tun? Oder gibt es eine Befehlszeile, die damit umgehen kann, ohne es manuell zu tun?

Answer 1

Ich musste das einfach zu einem bestehenden Projekt machen und habe eine Reihe von Informationen aus verschiedenen Orten zusammengestellt, meistens aus this similar stackoverflow question. Hier ist eine Reihe von Kommandozeilen-Aktionen (das war für mich auf 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