Javascript 如何使用Vue CLI 3.04上的sass资源加载器为所有Vue组件加载_variables.scss文件？

我有一个使用Vue CLI 3.0.4的全新VueJs项目脚手架 我希望在所有组件中使用SCSS变量，而不必在所有组件中导入

\u variables.SCSS

。 我想导入

\u variables.scss

，我发现这可以通过使用sass资源加载器来完成。 我已经查看了这里的所有答案，所有答案都过时了，因为它们不适用于vue loader 15

因此在

vue.config.js

中，我有以下内容：

var path = require('path');
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('sass')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/config/_variables.scss'),
        ]
      })
  }
}

当我运行此操作时，会出现以下错误：

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
        ^
      Undefined variable: "$brand-color".
      in C:\dev\git\vue-typescript-test\src\components\HelloWorld.vue (line 60, column 10)

$brand color变量用于Helloworld.vue组件中，因此不会添加变量

我似乎无法理解为什么它不起作用，因为我在Vue CLI中的文档后面写了一封信

我还想指出，我遵循了这里选择的答案：

非常感谢您的帮助

---

谢谢大家!

它应该使用以下代码段工作

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

请注意，@是访问src文件夹的快捷方式

---

不要忘记安装

节点sass

和

sass加载器

npm install --save-dev node-sass sass-loader

最后，将

lang

属性添加到

style

标记中

<style lang="scss">

// some style...

</style>

//一些风格。。。

它应该使用以下代码段工作

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

请注意，@是访问src文件夹的快捷方式

---

不要忘记安装

节点sass

和

sass加载器

npm install --save-dev node-sass sass-loader

最后，将

lang

属性添加到

style

标记中

<style lang="scss">

// some style...

</style>

//一些风格。。。

该解决方案在没有sass资源加载器的情况下解决了我的问题，这甚至更好！对于任何感兴趣的人，我都错过了文档的这一部分：您现在应该使用“prependData”而不是“data”，对于sass loader 8（sass loader v8）现在不推荐使用“data”。使用此解决方案，在没有sass资源加载器的情况下解决了我的问题，这甚至更好！对于任何感兴趣的人，我都错过了文档的这一部分：您现在应该使用“prependData”而不是“data”，对于sass loader 8+使用这个