すべてのcssファイルを角2でscssに変換

Question

私は角度2のプロジェクトに取り組み、angular-cliを使用しました。私はすべてのCSSファイルをscssに置き換えたいと思います。それを行う最も簡単な方法は何でしょうか？または、手動で行うことなく、それを処理できるコマンドラインがあります。

Answer 1

私はちょうど既存のプロジェクトにこれを実行し、さまざまな場所から多くの情報をまとめました。ほとんどはthis similar stackoverflow questionです。ここに一連のコマンドラインアクションがあります（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