时间戳

首页 > 解决方案 > 如何在 Vue CLI 3.04 上使用 sass-resource-loader 为所有 Vue 组件加载 _variables.scss 文件？

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

问题描述

我有一个使用 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)

$brand-color 变量在 Helloworld.vue 组件中使用，因此它不会添加变量。

我似乎不明白为什么它不起作用，因为我按照 Vue CLI 中的文档逐字逐句。

另外我想指出，我在这里遵循了选择的答案：Vue CLI 3 sass-resources-loader - Options.loaders undefined

非常感谢任何帮助。

谢谢！

标签： javascriptvue.jswebpacksassvuejs2

解决方案

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

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>

推荐阅读