如何升级 sass-loader答案

【问题标题】：How to upgrade sass-loader如何升级 sass-loader
【发布时间】：2020-06-26 09:44:10
【问题描述】：

我使用 vue，当我运行它时，有一个警告。我试过npm update 没有运气。如何摆脱它？

vue-cli-service serve
WARN  A new version of sass-loader is available. Please upgrade for best experience.

【问题讨论】：

你试过npm i sass-loader@latest
谢谢，它有帮助。为什么更新没有帮助？有 "sass-loader": "^7.1.0"
在大多数情况下，我们在package.json 中指定版本，例如^7.1.0，这表示我们允许更新任何次要版本。所以npm update不会触及主要版本。

标签： vue.js sass

【解决方案1】：

Serg 已经在评论中给出了答案。它对我有用。为其他人添加答案。希望对其他人有所帮助。

只需运行此命令

npm i sass-loader@latest

【讨论】：

【解决方案2】：

您可以通过使用yarn upgrade-interactive --latest 更新您的包，如果是 sass-loader，如果您已将其从 7 升级到 9，您可能有一些 invalid options erros，您可以按照我已经解释过的步骤来修复它们之前：https://stackoverflow.com/a/62844942/12666332

问题

基于https://github.com/vuejs/vue-cli/issues/4513，如果您已将 sass-loader 从 v7 升级到 8 或 9，您可能会遇到无效选项的验证错误

vue.config.js（webpack 中 sass-loaderv7 的有效语法）

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

错误

object:
    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 'data'. These properties are valid:

sass-loader v8.0 重大更改

你应该知道 v8.有以下重大变化：https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0

最低要求的 webpack 版本是 4.36.0
最低要求的 node.js 版本是 8.9.0
将所有 sass（includePaths、importer、functions）选项移动到 sassOptions 选项。函数选项不能用作函数，您应该使用 sassOption 作为 Function 来实现这一点。
data 选项被重命名为 prependData 选项默认值 sourceMap 选项的值取决于 devtool 值（eval/false 值不启用源映射生成）

解决方案 v8

正如文档所说，move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this. the data option was renamed to the prependData option

sass-loader v9.0 重大更改

你应该知道 v9.有以下重大变化：https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0

重大变化支持的最低 Nodejs 版本为 10.13
默认首选sass(dart-sass)，强烈推荐在 sass 上迁移 (dart-sass)
删除了 prependData 选项以支持附加数据选项，请参阅文档
当sourceMap为真时，sassOptions.sourceMap， sassOptions.sourceMapContents，sassOptions.sourceMapEmbed， sassOptions.sourceMapRoot 和 sassOptions.omitSourceMapUrl 将忽略。

解决方案 v9

如您在文档https://github.com/webpack-contrib/sass-loader#options（https://github.com/webpack-contrib/sass-loader#sassoptions，https://github.com/webpack-contrib/sass-loader#additionaldata）中看到的那样，如果我们将 data 更改为 additionalData，则在 ver9 中将修复无效选项错误。

  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

【讨论】：