Angular 5：如何通过CLI为已有项目设置CSS预处理器

当然可以！给已建好的Angular 5项目添加CSS预处理器其实很简单，下面是针对不同预处理器的通用操作步骤，不管你想用Less、Sass还是Stylus都能搞定：

1. 安装对应的预处理器依赖 #

Angular 5对应的Webpack版本较低，所以要安装兼容的loader版本，根据你选择的预处理器执行对应命令：

• Less：

  npm install less less-loader@4.1.0 --save-dev
  

• Sass/SCSS：

  npm install node-sass sass-loader@7.3.1 --save-dev
  

• Stylus：

  npm install stylus stylus-loader@3.0.2 --save-dev
  

2. 修改Angular CLI配置文件 #

Angular 5使用的是angular-cli.json（不是Angular 6+的angular.json），找到文件里的defaults节点，把styleExt字段改成你要使用的预处理器后缀：

"defaults": {
  "styleExt": "less", // 可按需改成"scss"或"styl"
  // 其他原有配置...
}

3. 更新现有样式文件的后缀与引用 #

• 把项目根目录的全局样式文件（比如styles.css）重命名为对应后缀，例如styles.less；
• 逐个修改组件中的styleUrls配置，将.css替换成新后缀，比如：

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less'] // 匹配修改后的后缀
  })
  

小提示 #

如果选Sass，你可以根据习惯选scss或sass语法，只要把styleExt设为对应后缀就行，Angular CLI会自动识别处理。

内容的提问来源于stack exchange，提问作者d4rty