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!

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Feb 10, 2022 at 15:40
This looks to be a serious problem because Vue3 docs looks to contradict themselves, looks like Vue3 in vite is no longer based on webpack but most info shows how to get this done using webpack, which does not work. I'm also facing the same problem here. — Lema
– Lema, Commented Sep 20, 2022 at 7:28
Sorry for late reply but I actually didn't research further @ElenaLj, I decided to just do it in each component so to accomplish things in time. I'll actually go back into researching that and will definitely inform you guys if I find any better way of doing this — Lema
– Lema, Commented Oct 14, 2022 at 15:31

Romalex · Accepted Answer · 2022-02-01 22:24:29Z

3

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"`
      }
    }
  }
};

edited Feb 1, 2022 at 22:24

answered Feb 1, 2022 at 21:27

Romalex

1,84615 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RandyRandom Over a year ago

Works like a charm! Also I suggest installing marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss for proper intelisense support.

Synchro · Accepted Answer · 2023-01-24 11:35:41Z

2

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        implementation: require("sass"),
        additionalData: `@import "~@/assets/scss/_variables.scss";`,
      },
    },
  },
});

answered Jan 24, 2023 at 11:35

Synchro

1,3034 gold badges26 silver badges63 bronze badges

Collectives™ on Stack Overflow

SassError: Undefined variable in VueJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related