How to globally inject SCSS variables now that Sass has deprecated @import?

[adamdehaven]

How would you inject global SCSS variables into all Vue components, non-namespaced, in a project that utilizes Vite?

I have some SCSS variables that I would like to be available in all my Vue components within the project, as well as available in any **/*.scss files in the same project.

The official docs recommend recommend utilizing additionalData as shown below, although doing so with the new @import -> @use change doesn't seem to work.

What I have below works if you change @use to @import just fine, but not as-is.

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "sass:color";
        @use "@my-package/tokens/scss/variables" as *;
        `,
      },
    },
  },
})

I started a related discussion in the sass repository in an issue that was already open (they don't really seem concerned with the Vite ecosystem or the repercussions of deprecating the existing @import functionality).

[adamdehaven]

I managed to get something working, but I can't say I love it.

Vue components

Vue components can inherit Sass variables from the nuxt.config.ts injection:

vite: {
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
        additionalData: `
        @use "sass:color";
        // Add to the global Sass namespace
        @use "my-package/tokens/scss/variables" as *;
        `,
      },
    },
  },
}

Sass files

Separate usage within _*.scss Sass partials (e.g. /assets/scss/**) must have the explicit @use statement replicated in order to make the variables available, e.g.

// _layout.scss partial
@use "my-package/tokens/scss/variables" as *;

body {
  color: $my-var;
}

// app.scss
@use "layout";

[SirH3nry]

Not sure if this thread is appropriate for my question, but similar to you, I'm trying to import global scss files that contain rules/properties and not just variables (or mixins or functions).
Since @use only grabs variables, mixins, and functions, while @import does everything, I'm not sure what the correct replacement strategy is.
I've been asking around similar threads because I can't seem to find an answer
nolimits4web/swiper#7771 (comment)
#12549 (comment)

Edit: I've figured it out. You can import an SCSS file in main.ts like

import '@/main.scss'

[devcaco]

I'm too having this issue with the latest version of SaSS (1.84) and Vite (6.0.4)

vite.config.js

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/mixins.scss" as *;`,
        api: 'modern',
      },
    },
  },

This gives me an error saying it can't find the stylesheet, even though the path is perfectly fine and the fixed does exits:

  [plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
1 │ @use "./src/mixins.scss" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/App.scss 1:1  root stylesheet

Any help would be greatly appreciated. Thanks

[adamdehaven]

You may just need to properly resolve the URL (I’m on mobile, this prob needs to be tweaked):

const currentDir = dirname(fileURLToPath(import.meta.url))

//...

additionalData: `
@use "${join(currentDir, './src/mixins.scss')}" as *;
`

[devcaco]

You may just need to properly resolve the URL (I’m on mobile, this prob needs to be tweaked):

const currentDir = dirname(fileURLToPath(import.meta.url))

//...

additionalData: `
@use "${join(currentDir, './src/mixins.scss')}" as *;
`

Unbelievable it worked! Thank you so much. I wonder why it was working before without using the join statement, is this something that changed in Vite with version 6?

Anyhow thank you so much.