将所有css文件转换为angular 2中的scss

Question

我在angular 2项目上工作过，并使用了angular-CLI。我想用SCSS替换所有的css文件。做这件事最简单的方法是什么？或者是否有一个命令行可以处理它而不需要手动。

Answer 1

我只需要对一个现有的项目这样做，并从不同的地方拼凑一堆信息，主要来自类似的stackoverflow问题。下面是一组命令行操作（在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