javascript - How to load a _variables.scss file for all Vue components using sass-resource-loader on Vue CLI 3.04? - Stack Overf

admin管理员组

文章数量:1425763

I have a fresh VueJs project scaffold using the Vue CLI 3.0.4 I want to use SCSS variables inside all the ponents without having to import the _variables.scss in all the ponents. I want to import _variables.scss and I found that can be done by using sass-resource-loader. I've looked at all the answers around here and all are outdated as they do not work with vue-loader 15.

So inside vue.config.js i have the following:

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'),
        ]
      })
  }
}

When I run this, I get the following error:

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

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

The $brand-color variable is used in the Helloworld.vue ponent so it seams the variables are not added.

I can't seem to understand why it does not work, as i followed the docs in the Vue CLI by the letter.

Also I want to point out that I followed the chosen answer here: Vue CLI 3 sass-resources-loader - Options.loaders undefined

Any help greatly appreciated.

Thank you!

I have a fresh VueJs project scaffold using the Vue CLI 3.0.4 I want to use SCSS variables inside all the ponents without having to import the _variables.scss in all the ponents. I want to import _variables.scss and I found that can be done by using sass-resource-loader. I've looked at all the answers around here and all are outdated as they do not work with vue-loader 15.

So inside vue.config.js i have the following:

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'),
        ]
      })
  }
}

When I run this, I get the following error:

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

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

The $brand-color variable is used in the Helloworld.vue ponent so it seams the variables are not added.

I can't seem to understand why it does not work, as i followed the docs in the Vue CLI by the letter.

Also I want to point out that I followed the chosen answer here: Vue CLI 3 sass-resources-loader - Options.loaders undefined

Any help greatly appreciated.

Thank you!

• javascript
• vue.js
• webpack
• sass
• vuejs2

Share Improve this question Follow edited Oct 3, 2018 at 15:17 Constantin Chirila asked Oct 3, 2018 at 14:49 Constantin ChirilaConstantin Chirila 2,13922 gold badges2020 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

It should work using this following code snippet.

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

Note that @ is a shortcut to access the src folder.

---

Don't forget to install node-sass and sass-loader as well.

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

Finally, add the lang attribute to your style tags.

<style lang="scss">

// some style...

</style>

本文标签：