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

Question

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.

Answer 1

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');
}

Answer 2

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