Vue3+Vite环境下SCSS中:root变量无法注册的问题排查

核心问题 #

你在additionalData中使用的@use "./src/styles/main.scss"相对路径存在错误——这个路径是相对于每个被编译的SCSS文件所在目录，而非项目根目录。比如当编译src/components/xxx.scss时，Vite会尝试寻找src/components/src/styles/main.scss，显然这个路径不存在，导致main.scss根本没被正确引入，:root里的CSS自定义属性自然无法注册到全局样式中。

解决方案 #

你可以选择以下任意一种方式修复：

1. 使用Vite的@别名（推荐）

Vite默认在Vue项目中配置了@指向src目录，直接用别名替换相对路径，确保所有SCSS文件都能正确找到main.scss：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // 如果是Vue项目可省略此配置，默认已存在
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/main.scss";
        `
      }
    }
  }
})

2. 使用项目根目录绝对路径

通过path.resolve生成绝对路径，避免相对路径解析错误：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "${path.resolve(__dirname, './src/styles/main.scss')}";
        `
      }
    }
  }
})

3. 直接在入口文件全局引入

如果你的项目入口文件（如main.js/main.ts）已经通过import './styles/main.scss'引入了main.scss，可以直接删除additionalData的配置，避免重复引入，同时确保全局样式被正确加载。

验证 #

修复后，检查浏览器最终输出的CSS文件，应该能看到:root { --test: #ff0000; }规则，此时var(--test)就能正常生效。

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