Vue.js+Vite项目中@use 'sass:color'致全局Sass变量失效的解决方法

使用Vue.js + Vite + Sass开发项目时，在SCSS文件中使用@use 'sass:color'后，Vite配置中css.preprocessorOptions.scss.additionalData注入的全局变量无法访问，报错Undefined variable；但注释掉@use 'sass:color'后，全局变量正常生效。

相关代码配置如下：

全局变量文件 ./src/style/vars.scss #

$sample-var: red;

Vite配置 vite.config.js #

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

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

SCSS文件 ./src/style/sample.scss #

@use 'sass:color';

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

组件代码 #

<script setup>
</script>

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

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

1. Sass模块模式的作用域限制：当SCSS文件中使用@use时，Sass会启用模块模式，此时文件内的所有代码都处于模块作用域中，只有显式导入的模块变量才能被访问。若Vite的additionalData注入内容路径解析错误，会导致全局变量模块未被正确导入，自然无法访问变量。
2. 相对路径解析错误：additionalData中的@use "./src/style/vars.scss" as *;使用了相对路径，该路径是相对于当前处理的SCSS文件而非项目根目录。例如在src/style/sample.scss中，这个相对路径会被解析为src/style/src/style/vars.scss，显然不存在，导致全局变量模块导入失败。

而注释掉@use 'sass:color'时，Sass退回到旧的全局模式，@import会将变量提升到全局作用域，此时Vite的路径解析逻辑可能意外兼容了错误的相对路径，导致变量能被访问，但这并非正确的模块用法。

方案1：使用Vite别名确保路径正确 #

先在Vite配置中配置路径别名，让@指向src目录，再在additionalData中使用别名导入全局变量：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/style/vars.scss" as *;`,
      },
    },
  },
});

方案2：配置Sass的includePaths #

将src/style目录加入Sass的包含路径，这样可以直接通过文件名导入全局变量模块：

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

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [path.resolve(__dirname, './src/style')],
        additionalData: `@use "vars.scss" as *;`,
      },
    },
  },
});

• 优先使用Sass模块系统：官方推荐用@use替代@import，模块系统提供更清晰的作用域控制，避免全局变量污染。
• 统一路径解析规则：通过Vite别名或Sass的includePaths管理全局资源路径，避免因相对路径导致的解析错误。
• 全局模块分类管理：将全局变量、混合宏、函数等分别放在不同的模块文件中，按需全局注入，保持代码结构清晰。
• 避免过度全局注入：仅将真正需要全局访问的资源注入，对于局部使用的模块，建议在对应文件中显式导入。

内容的提问来源于stack exchange，提问作者LondonAppDev