CODEWITHSUNDEEP
javascriptvue.jswebpacksassvuejs2
Constantin Chirila
Constantin Chirila

Reputation: 2129

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

I have a fresh VueJs project scaffold using the Vue CLI 3.0.4 I want to use SCSS variables inside all the components without having to import the _variables.scss in all the components. 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\components\HelloWorld.vue (line 60, column 10)

The $brand-color variable is used in the Helloworld.vue component 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!

Upvotes: 2

Views: 5150

Answers (1)

Quentin
Quentin

Reputation: 3289

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>

Upvotes: 5

Related Questions