node-sass更换为dart-sass警告消除

最近帮隔壁团队打辅助，在启动项目时发现他们的webpack4+Vue2项目用的还是node-sass，这可苦了我，我开发机是 mbp M3，安装node-sass报N多异常呀。没办法，只能说服他们升级。好说歹说终于同意我进行升级，并且要求对现有代码不能有任何改动。

我欣然同意（心中一万个xxx，帮你打辅助还要求这要求那），谁让我是活雷锋呢。

升级node-sass

网上的升级指引很多，笔者这里就不再赘述了，直接贴出升级前后的依赖关系

升级前	升级后
"node-sass": "6.0.1"	"sass": "^1.80.3", "sass-loader": "^10.5.2",

Deprecation Warning

升级完成后执行npm run dev启动项目：

怎么这么多 Warning!!!

看下 sass 官网文档别人确实声明了 @import已经不再建议使用，而是推荐使用@use。

虽然Warning不影响运行与构建，但这要是不处理，铁定会被他们怼的。没办法，只能想办法消除这些警告了。

修改代码是不可能修改的，项目里数百个.vue文件，难道要我一个个去修改吗？尽管可以写脚本自动替换，但是升级前对方明确要求不能修改现有业务代码~~

quiet: true

不就是忽略警告嘛，简单得很，在webpack里配置quiet: true呗：

javascript 复制代码

devServer: {
   ...
   quiet: true
}

不能说毫无用处，其实就是一点没用...

求助大模型

chatgpt、文心一言、kimi、豆包都问一遍，通过引导大模型提问得到了下面的方案：

在sass-loader的配置选项中设置quietDeps选项为true来减少一些依赖相关的警告。

Webpack 4 提供了ignoreWarnings选项，可以在配置文件中设置它来忽略特定类型的警告。

先试用方案一进行了尝试：

javascript 复制代码

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.s(a|c)ss$/,
        use: [
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              quietDeps: true,
            },
          },
        ],
      },
    ],
  },
}

没有任何作用~

方案二个人感觉太粗暴了，完全配不上我优雅的风格，那怎么办呢？我思考着既然sass-loader主动输出了这些警告，肯定提供了配置项来关闭这些烦人的警告。所以问题的关键就是找到如何配置（这一句好废话，自始至终不就是因为找不到对应的配置才这么被动的吗）

查阅官方文档

先取npmjs找到sass-loader的介绍页：

上图红框内提示了sassOptions支持的配置项跟 Dart Sass的配置项一致：

继续找Sass的相关配置，扫了一眼左侧菜单，最后一项JavaScript API引起了我的注意，点进去看一下：

终于找到了相关的Options，赶紧点进去看下，在页面头部看到了一个熟悉的配置项quietDeps，让我更加确定找对地方了：

红框里的silenceDeprecations引起了我的注意，控制台输出的不就是一系列的 deprecated warning嘛，那是不是可以通过这个配置让warning silence呢？看下这个配置的具体作用：

A set of active deprecations to ignore.

If a deprecation warning of any provided type is encountered during compilation, the compiler will ignore it instead.

一组要忽略的活动弃用。编译期间遇到任何提供类型的弃用警告，编译器将忽略它。

在看该配置项的类型声明：
silenceDeprecations?: DeprecationOrId[] 其值为一组忽略类型，所以我们要做的就是找到相应的 DeprecationId，然后将其添加到参数列表里即可。再来看下Sass预定义了哪些 DeprecationId:

typescript 复制代码

export interface Deprecations {
  // START AUTOGENERATED LIST
  // Checksum: 47c97f7824eb25d7f1e64e3230938b88330d40b4

  'call-string': Deprecation<'call-string'>;
  elseif: Deprecation<'elseif'>;
  'moz-document': Deprecation<'moz-document'>;
  'relative-canonical': Deprecation<'relative-canonical'>;
  'new-global': Deprecation<'new-global'>;
  'color-module-compat': Deprecation<'color-module-compat'>;
  'slash-div': Deprecation<'slash-div'>;
  'bogus-combinators': Deprecation<'bogus-combinators'>;
  'strict-unary': Deprecation<'strict-unary'>;
  'function-units': Deprecation<'function-units'>;
  'duplicate-var-flags': Deprecation<'duplicate-var-flags'>;
  'null-alpha': Deprecation<'null-alpha'>;
  'abs-percent': Deprecation<'abs-percent'>;
  ...
}

上面只摘取了部分 DeprecationId，总数大概有数十个，总不能全部添加或者一个个试吧。

这里就得借助 sass-loader的提示了，还记得最开始我们在控制台看到的 Deprecation Warning 吗，在输出Warning的同时也指明了该Warning对应的 DeprecationId!

抱着二次确认的想法，在Deprecations里搜索legacy-js-api、import，确实查找到了相应的值。

最终解决方案

修改sass-loader的sassOptions配置，增加silenceDeprecations值，为了保险起见，同时配置quietDeps: true:

javascript 复制代码

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.s(a|c)ss$/,
        use: [
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              quietDeps: true,
              silenceDeprecations: ['import', 'legacy-js-api', 'css-function-mixin'],
            },
          },
        ],
      },
    ],
  },
}

怎么样？关于node-sass升级为dart-sass后因过时语法产生的Warning如何消除的解决办法，你学废了吗？^_^