如何禁用外部类引发的Sass警告（React+Dart Sass环境）

1. 修正sass-loader的配置写法（自定义webpack配置场景） #

你之前尝试的quietDeps选项需要嵌套在sassOptions子对象中——因为sass-loader只会把sassOptions内的配置传递给Dart Sass编译器，直接写在loader的根options里不会生效。修改你的webpack规则：

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true,
                sassOptions: {
                    quietDeps: true
                }
            }
        }
    ]
},

同时检查sass-loader版本，需要在v10.0.0以上才支持quietDeps，执行npm install sass-loader@latest升级即可。

2. 未eject的Create React App项目处理方案 #

如果你的项目是用create-react-app创建且没执行eject，不用修改webpack配置，直接在package.json中添加sassOptions配置：

{
  "name": "your-project",
  "version": "1.0.0",
  "sassOptions": {
    "quietDeps": true
  },
  "scripts": {
    "build": "react-scripts build"
  }
}

保存后重新执行npm run build即可生效。

3. 拆分项目与node_modules的SCSS处理规则 #

如果前两种方法无效，可以在webpack里写两个独立的SCSS规则，分别处理项目源码和node_modules中的文件，确保依赖文件触发quietDeps：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 处理src目录下的SCSS文件，保留本地代码警告
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 处理node_modules目录下的SCSS文件，关闭依赖警告
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                quietDeps: true
              }
            }
          }
        ]
      }
    ]
  }
};

4. 临时应急方案：用环境变量关闭所有Sass警告 #

如果以上方案都不适用，可通过环境变量强制关闭警告：

• Linux/macOS：

SASS_FLAGS="--quiet-deps" npm run build

• Windows系统先安装cross-env统一环境变量：

npm install cross-env --save-dev

然后修改package.json的build脚本：

"scripts": {
  "build": "cross-env SASS_FLAGS=\"--quiet-deps\" react-scripts build"
}

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