SassError: Undefined variable in VueJS

Question

I am stuck at this problem and would like some help. I tried searching for a similar issue, though couldn't find a proper solution. The problem is pretty simple: my components cannot access my variables.scss file unless I import it directly - that way I need to so in every single component of my project... there must be another way. This is the structure of my project so far: I created a global.scss file that imports my variables.scss file here and global.scss is imported in App.vue here

The issue is fixed if every component has the specific import of the variables file: here

There must be a smoother way.

Hope someone can help me fix this issue!

Answer 1

If you use webpack, you can use an additionalData option of the sass loader to automatically import your variables in each component

https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables.sass"`
      }
    }
  }
};