Question

我使用Vue CLI 3.0.4新建了VueJs项目支架我想在所有组件中使用SCSS变量，而不必在所有组件中导入_variables.scss。我想导入_variables.scss，发现可以通过使用sass-resource-loader来完成。我已经查看了这里所有的答案，并且所有答案都已过时，因为它们无法在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)

Helloworld.vue组件中使用了$ brand-color变量，因此它不会接缝变量。

我似乎不明白为什么它不起作用，因为我在Vue CLI中的文档后面加上了字母。

我还要指出，我遵循了此处选择的答案：Vue CLI 3 sass-resources-loader - Options.loaders undefined

任何帮助都将不胜感激。

谢谢！

Answer 1

它应该使用下面的代码片段工作。

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

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

不要忘记同时安装node-sass和sass-loader。

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

最后，将lang属性添加到您的style标记中。

<style lang="scss">

// some style...

</style>

如何在Vue CLI 3.04上使用sass-resource-loader为所有Vue组件加载_variables.scss文件？

1 个答案: