如何升级sass-loader

Question

我使用vue，当我运行它时，会出现一个警告。我试过npm update，但没走运。如何摆脱它？

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

Answer 1

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

只需运行此命令

npm i sass-loader@latest

Answer 2

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

Problem

基于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

4.36.0

• minimum所需的
• 最低版本为4.36.0
• minimum node.js版本为8.9.0
• 将所有sass (includePaths、importer、functions)选项移动到sassOptions选项。functions选项不能用作函数，应使用sassOption as Function来实现此目的。
• data选项已重命名为prependData选项。sourceMap选项的默认值取决于devtool值(eval/false值不支持源地图生成)

Solution 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

(dart-sass)

• the中断更改支持的最低Nodejs版本为10.13
• 首选sass (dart- sass )默认情况下，强烈建议在sass上迁移(dart-sass)
• the prependData选项已删除，取而代之的是additionalData选项，请参阅文档
• 当sourceMap为true时，sassOptions.sourceMap、sassOptions.sourceMapContents、sassOptions.sourceMapEmbed、sassOptions.sourceMapRoot和sassOptions.omitSourceMapUrl将被忽略。

Solution v9

在ver9中，正如您在文档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，将修复无效选项错误。

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