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

[kontur]

How would you use this inside a Component.vue's <style>? I find that the prepended @use import does not translate to there, so a component trying to use a global variable will not have access to the * scoped imports, somehow. (And I'd imagine that is the whole point of the additionalData…)

[adamdehaven]

Adding the additionalData in the config as shown above works for component style blocks. Once this is added, you should have access to all of your SCSS variables that are exposed

[ayochim]

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.

[DauMoe]

Hi mate, I got the same issue after migration to use @use method but in WEBPACK. So everything will depend on webpack working flow only. But I hope it can help you

About undefined variable error
So the root cause can be not every single scss file will go though sass-loader since they are not treated as webpack module (dive deep into sass-loader, it get sass content from webpack module). So that's why some scss files are not injected variable then it will throw undefined variable (@use allows variables usage locally only, not like @import)

Solution?
I use options.sassOptions.importer in sass-loader. Refer more in here. We will check every single import statment in canonicalize fn then resolve the content in load fn

loader: 'sass-loader',
options: {
  sassOptions: {
      importers: [{
	  canonicalize(url) {
		  if (url === "<custom_scss_file_url>")) {
			  return new URL("<your_unique_custom_url>");
		  }
		  return null;
	  },
  
	  load(canonicalUrl) {
		  if (canonicalUrl.href === "<your_unique_custom_url>") {
			  return {
				  contents: "<put_any_custom_data_as_your_wish_here>",
				  syntax: "scss"
			  };
		  }
		  return null;
	  }
  }]
}

and in another scss file. You need to import your <custom_scss_file_url> as global. E.g:

@use <custom_scss_file_url> as *;

That's how I can fix this issue. Hoping you guys can find out the same solution in Vite