How to use sass global variables from other components in vite/vue3

user_14431876 0
Viewed 5549

I want to use and change global variables from other components, my files structure looks like this...

enter image description here

I have my variables in global.sass file, but I can't access variables in other components.

vite vuejs3 vue.js sass variables
2 Answers

You need to set configuration file vite.config.js :

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/global.scss";`
    }
  }
},

also for local fonts you can add another configuration there, set alias:

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
},

and then use it something like:

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(@/assets/fonts/OpenSans-Bold.woff2) format('woff2');
}
user_119891890

Nikola's answer is correct. For any Nuxt3 users out there I'd like to add you need to make sure you don't have explicit css config in your nuxt config file at the same time. Otherwise you might get file already imported error

user_94630700
Related