Using @use 'sass:color' in my Vue.js/Vite app causes variables imported via additionalData to become unusable

Question

I'm using Vue.js with Vitest and sass loader.

When I use @use 'sass:color' in an inline scss file or component, it seems to overwrite the vite.config.tscss.preprocessorOptions.scss.additionalData set in the code> file.

The problem is reproduced here: https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src/style/sample.scss

For future reference, the settings are as follows:

./src/style/vars.scss

$sample-var: red;

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/style/vars.scss" as *;`,
      },
    },
  },
});

./src/style/sample.scss

@use 'sass:color';

.sample-style {
  color: $sample-var;
}

Component:

<script setup>

</script>

<template>
  <div class="sample-style">Hello sample style</div>
</template>

<style lang="scss" scoped>
@import '../style/sample.scss';
</style>

Using this code, I get Undefined variable. in $sample-var in sample.scss mistake.

However, if I comment out @use 'sass:color';, it works as expected (I can access $sample- var).

What's happening here? How do I properly import sass:color in my component style while using additionalData in vite.config.js A set of variables accessible globally? I'm interested in learning about best practices.

Answer 1

Before the <style> tag of the component, the Scss code defined in additionalData will be added. So what the Sass compiler ends up processing is:

@use "./src/style/vars.scss" as *;
@import '../style/sample.scss';

According to the documentation , when sample.scss does not contain any @use statements:

This means that the above code is evaluated like:

@use "./src/style/vars.scss" as *;
.sample-style {
  color: $sample-var;
}

However, according to the documentation for importing module system files (emphasis mine):

$sample-var is a member of a module, so sample.scss cannot access $sample-var.