将所有css文件转换为角度为2的scss

Question

我曾参与过角度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