如何通过Craco屏蔽第三方库的Dart Sass除法废弃警告？

运行npm run dev启动应用时，收到大量Dart Sass废弃警告，示例如下：

╷
227 │ $pill--small-radius: 8px / 50%;
    │                      ^^^^^^^^^
    ╵
    node_modules/.pnpm/@paprika+tokens@0.1.18_wcqkhtmu7mswc6yz4uyexck3ty/node_modules/@paprika/tokens/lib/tokens.scss 227:22  @import
    src/utils/RobotsHelpers.scss 1:9                                                                                          @import
    src/components/Test/Test.scss 1:9                                               root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(12px, 50%)

这些警告来自第三方库，希望屏蔽。根据提示可设置quietDeps选项，但尝试多种craco.config.js配置均无效：

module.exports = {
  webpack: { ... },
  eslint: { ... },
  style: {
    css: {
      loaderOptions: (cssLoaderOptions, { env, paths }) => {
        ...
        return {
          ...cssLoaderOptions,
          modules: {
            compileType: 'icss',
            // sassOptions: { quietDeps: true },    // 此配置报错
          },
        };
      },
    },

    // sass: {     // 此配置报错
    //   loaderOptions: {
    //     quietDeps: true,
    //   },
    // },

    // sass: {     // 此配置无法阻止警告
    //   loaderOptions: {
    //     sassOptions: { quietDeps: true },
    //   },
    // },
  },
};

相关依赖版本：

"@craco/craco": "^5.8.0",
"react-scripts": "4.0.3",
"sass": "^1.49.8",

如何通过Craco配置抑制这些除法警告？

针对当前依赖版本组合（react-scripts 4.x + @craco/craco 5.x），需要直接修改webpack配置中sass-loader的选项来传递quietDeps，正确的craco.config.js配置如下：

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // 定位到webpack配置中的sass规则
      const sassRuleGroup = webpackConfig.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
      const sassRules = sassRuleGroup.filter(rule => rule.test?.toString().includes('scss|sass'));

      sassRules.forEach(rule => {
        // 找到规则中的sass-loader
        const sassLoader = rule.use.find(loader => loader.loader.includes('sass-loader'));
        if (sassLoader) {
          // 添加quietDeps配置
          sassLoader.options = {
            ...sassLoader.options,
            sassOptions: {
              ...sassLoader.options?.sassOptions,
              quietDeps: true,
            },
          };
        }
      });

      return webpackConfig;
    },
  },
  // 保留原有其他配置
  eslint: { ... },
};

配置说明 #

1. react-scripts 4.x的webpack配置中，sass相关规则嵌套在oneOf数组内，需要先定位到对应的规则项
2. 直接修改sass-loader的options.sassOptions，添加quietDeps: true，该选项会让Sass忽略node_modules目录下第三方依赖的废弃警告
3. 这种方式绕过Craco的style配置层，直接操作底层webpack规则，适配当前依赖版本的约束

内容的提问来源于stack exchange，提问作者Alan P.