Angular 2中如何实现保存SCSS文件时自动执行scss-lint命令？

我之前在Angular项目里也遇到过一模一样的需求，给你几个实用的解决方案，从简单到进阶都有：

方案一：用concurrently并行启动监听（最简单） #

sass-lint本身支持watch模式，我们可以同时启动ng serve和带watch的scss-lint命令，这样保存SCSS文件时就能自动触发检查了：

1. 首先安装concurrently（用来并行运行多个命令）：

npm install concurrently --save-dev

2. 修改package.json里的scripts配置：
   • 先更新你的scss-lint脚本，加上--watch参数开启监听：

     "scss-lint": "sass-lint 'src/**/*.scss' -v -q --watch"
     

   • 然后修改start脚本，用concurrently同时启动scss-lint和ng serve：

     "start": "concurrently \"npm run scss-lint\" \"ng serve --host $npm_package_config_host --port $npm_package_config_port --ec=true\""
     

这样运行npm start后，会先执行一次完整的scss-lint检查，然后同时保持ng serve的开发服务和scss-lint的文件监听，只要你保存SCSS文件，就会自动触发lint检查。

方案二：用nodemon精准监听（适合需要自定义监听规则的场景） #

如果你需要更灵活的监听规则（比如排除某些目录），可以用nodemon来监听SCSS文件变化并触发lint：

1. 安装依赖：

npm install concurrently nodemon --save-dev

2. 在scripts里新增一个监听脚本，再修改start命令：

"scripts": {
  // ...其他原有脚本
  "scss-lint": "sass-lint 'src/**/*.scss' -v -q",
  "scss-lint-watch": "nodemon --watch src --ext scss --exec 'npm run scss-lint'",
  "start": "concurrently \"npm run scss-lint\" \"npm run scss-lint-watch\" \"ng serve --host $npm_package_config_host --port $npm_package_config_port --ec=true\""
}

这里nodemon --watch src --ext scss表示只监听src目录下后缀为scss的文件，变化时就执行npm run scss-lint。

方案三：集成到Angular的构建流程（进阶） #

如果你希望完全通过ng serve的监听来触发，不想单独开进程，可以通过自定义Webpack配置来实现：

1. 安装依赖：

npm install @angular-builders/custom-webpack chokidar --save-dev

2. 在项目根目录创建webpack.extra.js文件，添加监听逻辑：

const chokidar = require('chokidar');
const { exec } = require('child_process');

// 监听所有SCSS文件的变化
chokidar.watch('src/**/*.scss')
  .on('change', () => {
    console.log('\n[SCSS变化] 开始执行scss-lint检查...');
    exec('npm run scss-lint', (error, stdout, stderr) => {
      if (error) {
        console.error(`scss-lint检查失败: ${error.message}`);
        return;
      }
      if (stderr) {
        console.error(`scss-lint输出错误: ${stderr}`);
        return;
      }
      console.log('scss-lint检查完成:', stdout);
    });
  });

module.exports = {};

3. 修改angular.json里的构建配置，使用自定义Webpack builder：
   • 找到projects -> 你的项目名 -> architect -> build，修改builder并添加自定义配置：

     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.extra.js"
       },
       // 保留你原有的其他build配置
     }
     

   • 同样修改architect -> serve的builder：

     "builder": "@angular-builders/custom-webpack:dev-server",
     "options": {
       // 保留你原有的其他serve配置
     }
     

之后运行npm start，ng serve启动时会加载这个Webpack配置，自动监听SCSS文件变化并触发lint检查。

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