webpack sass-loader 又又又改配置入参了

时间：

分类：

webpack

字数：

513 字

时长：

大约需要 2 分钟

次数：

0 人阅读

真的是百思不得其解，为何你一个loader会把配置参数改来改去，一个开源插件，不同版本居然用的入口参数名不一样，关键这参数功能是一毛一样的！！！！

详说

sass、scss文件公用配置，一般用webpack都会从配置文件去处理，不会在每个文件都去引入一次。

曾今2019年之前配置方法大概如下：

1
2
3
4
5
6
7
8
9
10
11
{
  loader: "sass-loader",
  options: {
    data: `
      $env: ${process.env.NODE_ENV};
      @import "sass/_fn.scss";
      @import "sass/_mixins.scss";
      @import "sass/_var.scss";
    `
  }
}

2019年某一次更新版本之后报错：

1
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

为了解决次问题翻了官方文档，改成了 prependData，修改成了如下配置：

1
2
3
4
5
6
7
8
9
10
11
{
  loader: "sass-loader",
  options: {
    prependData: `
      $env: ${process.env.NODE_ENV};
      @import "sass/_fn.scss";
      @import "sass/_mixins.scss";
      @import "sass/_var.scss";
    `
  }
}

神奇不，功能一样的入参变了

然后

2023年某个项目装包出现错误，删除了 package-lock.json 之后重新装包，导致 sass-loader 又更新了！！！

运行项目，Duang ~ 又报错了

1
2
3
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

看到没，人家说已经不支持prependData配置了！！

然后又翻了官方文档，好家伙，相同功能的配置文件改成 additionalData，修改之后的配置如下：

1
2
3
4
5
6
7
8
9
sassLoaderOptions: {
  // prependData: `
  additionalData: `
    ${Object.keys(styleVariables).map(key => `\$${key}: ${styleVariables[key]};`).join('\r\n')};
    @import "sass/_var.scss";
    @import "sass/_mixins.scss";
    @import "sass/_math.scss";
  `,
},

以上是 nextjs 项目配置，原生的webpack大概配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
  loader: "sass-loader",
  options: {
    // prependData: `
    additionalData: `
      $env: ${process.env.NODE_ENV};
      @import "sass/_fn.scss";
      @import "sass/_mixins.scss";
      @import "sass/_var.scss";
    `
  }
}

奇葩不，一个配置参数会改来改去，真的是不忍吐槽

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-06-24/webpack-sass-loader/

如果您觉得文章不错，可以点击文章中的广告支持一下！