Webpack 中的 sass-loader 又更新了，回想起在 Vue-cli3 刚发布的时候，sass-loader 刚更新到 v7 版本。
时至今日 Vue-cli4 已经发布了了好长一段时间，咱们的 sass-loader 也在不知不觉中更新了 v8 再到 v9 版本。
因为更新涉及到比较常用的一些配置项的变动，你可能会像我一样在更新后遇到一些小问题。
经过一番搜索与小折腾，我将发现的关于 sass-loader 重要的更新事项与解决方案整理了出来，供参阅。

版本更新

经过查阅 sass-loader 的官方文档，整理了一下 v8 与 v9 版本重要的升级变更。

版本 变更类型 详情
v8 兼容性 最低兼容的 webpack 版本为 4.36.0
v8 兼容性 最低兼容的 nodejs 版本为 8.9.0
v8 配置移动 将所有 sass 相关的配置选项 （includePaths, importer, functions) 移动到 sassOptions 选项对象下
v8 配置更改 sassOptions 选项对象下的配置项不再支持返回一个函数，除非将整个 sassOptions 对象作为一个函数
v9 配置更名 data 选项被命名为 prependData
v9 兼容性 最低兼容的 nodejs 版本为 10.13
v9 实现调整 优先且默认以 dart-sass 作为 sass-loader 的实现，官方强烈推荐用 dart-sass 替代 node-sass 或 ruby-sass
v9 配置更名 prependData 更名为 additionalData
v9 配置调整 当 sourceMap 选项值为 true 时，sassOptions.sourceMap, sassOptions.sourceMapContents, sassOptions.sourceMapEmbed, sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl 将统统被忽略

https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0
https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0

典型问题

配置全局变量

sass-loader 从 V7 升级到 V8 或 V9 版本之后在 配置全局变量时 你命中注定会遇到 验证选项错误 的问题。

问题复现

  1. object:
  2.     ValidationError: Invalid options object. Sass Loader has been
  3.     initialized using an options object that does not match the API schema.
  4.       - options has an unknown property 'data'. These properties are valid:

vue.config.js 配置文件中：( sass-loader v7 版本时在 webpack 中配置时这是正确的写法 )

在 sass-loader 为 V7 版本时，配置 sass 全局变量可以用 data 作为选项名进行传值，同时这也是 Vue-cli3 官方文档里面里面的写法，但目前这个写法已经过期了。

  1. css: {
  2.     loaderOptions: {
  3.       sass: {
  4.         data: `@import "@/assets/styles/variables/index.scss";`
  5.       }
  6.     }
  7.   }

解决方案

  1. css: {
  2.     loaderOptions: {
  3.       sass: {
  4.         prependData: `@import "@/assets/styles/variables/index.scss";` // V8
  5.         additionalData: `@import "@/assets/styles/variables/index.scss";` // V9
  6.       }
  7.     }
  8.   }

参考链接 https://stackoverflow.com/questions/58184549/sass-loader-error-invalid-options-object-that-does-not-match-the-api-schema https://github.com/vuejs/vue-cli/issues/4513