1. 前言
通常，当我们使用angular-cli启动应用程序时，默认情况下它将使用css，除非我们按以下方式创建项目。
1 | ng new your_application --style=scss |
但是当我们开发项目到一半的时候，突然有一天研究某些东西后发现使用scss比css好用多了，这个时候我们将面临一个大问题，怎么将当前项目的css全部转成scss进行以后的开发且置为默认项呢？别着急，往下看！
2. 第1步：更改步骤
如果你使用的是最新的angular-cli，那最好了，如果不是请检查当前的angular-cli版本是否大于6.0.7，如果以上都没有问题，那么OK，请使用以下命令更改配置。
1 | ng config schematics.@schematics/angular:component.styleext scss |
这个时候你会看到脚本会在项目的angular.json文件中做了如下修改：
1 | "schematics": { |
2 | "@schematics/angular:component": { |
3 | "styleext": "scss" |
4 | } |
3. 第2步：重命名css文件
这个是头疼问题了，总不能挨个挨个修改吧，答案是拒绝的啦。如果您使用的是mac或linux，请从终端打开src文件夹，然后键入以下命令。
1 | find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \; |
ok！漂亮，现在你可以看下项目所有以.css后缀的文件全都重命名为.scss的后缀了！
==警告：请确保一定在项目src目录下打开终端，否则后果很严重！！！==
3. 更改所有引用
有一些文件是需要修改css文件的位置的，通常有以下这些：
- xxx.component.ts文件中@Component装饰器里styleUrls的css文件路径。
- 如果您引用bootstrap或font-awesome，则可以将导入其css文件的文件更改为.scss替代项。
- 在你的angular.json文件中，可能会引用你的style.css文件，你必须将它们改为.scss，因为我们已经重命名了它。
完成了以上步骤之后（PS：如果你使用了font-awesome），则可能还会意外出现以下错误：
1 | ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss) |
2 | Module Error (from ./node_modules/postcss-loader/lib/index.js): |
3 | (Emitted value instead of an instance of Error) CssSyntaxError: /node_modules/font-awesome/scss/_path.scss:9:4: Can't resolve '../fonts/fontawesome-webfont.woff' in '/src' |
好吧，这是我们不愿意看到的，在@importfont-awesome scss 之前添加以下行解决了这个问题。
1 | $fa-font-path: "~font-awesome/fonts"; |