javascript - 如何修复 Sass 加载器的 ValidationError？

Question

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

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

我检查了 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";
        `
      }
    }
  }
};

目录结构

Answer 1

将 data 更改为 prependData ...请参阅 docs