3

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!

ElenaLj
  • 95
  • 2
  • 7
  • Please provide enough code so others can better understand or reproduce the problem. – Community Feb 10 '22 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 Sep 20 '22 at 07:28
  • @Lema did you manage to find a solution in the end? – ElenaLj Sep 23 '22 at 10:19
  • 1
    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 Oct 14 '22 at 15:31

2 Answers2

2

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"`
      }
    }
  }
};
Romalex
  • 1,582
  • 11
  • 13
  • Works like a charm! Also I suggest installing https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss for proper intelisense support. – RandyRandom Mar 21 '23 at 16:11
2
const { defineConfig } = require("@vue/cli-service");

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