如何修复 Sass 加载程序的 ValidationError？答案

【问题标题】：How can I fix ValidationError of Sass loader?如何修复 Sass 加载程序的 ValidationError？
【发布时间】：2020-04-23 12:29:51
【问题描述】：

我试图将全局 scss 变量添加到我的 Vue 项目中。我找到了这个例子Globally load sass。所以我在我的 Vue 项目的根文件夹中创建了vue.config.js，然后我复制并粘贴了vue.config.js 并更改了数据输入路径，然后当我尝试为我的项目提供服务时，我收到了这个错误：

ValidationError：无效的选项对象。 Sass Loader 已使用与 API 模式不匹配的选项对象进行初始化。 - 选项具有未知属性“数据”。这些属性是有效的：对象{实现？，sassOptions？，prependData？，sourceMap？，webpackImporter？ } 验证时

我检查了我的 package.json 以确保我已经安装了 node-sass 和 sass-loader 并且我找到了这些依赖项：

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.2",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }

所以我有点困惑，我不知道我做错了什么。我也知道我可以将那些 .scss 变量导入到我将要使用它们的每个 vue 组件中，但我不喜欢这个解决方案。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/style/index.scss";
        `
      }
    }
  }
};

目录结构

【问题讨论】：

标签： javascript vue.js webpack sass vuejs2

【解决方案1】：

将data 更改为prependData ...查看docs

【讨论】：

我检查了文档，但不知何故忽略了这一点。谢谢老哥