Vue3+Vite全局加载Color Token失败问题求助

常见错误原因及对应修复方案 #

1. Vite配置中Sass全局导入的语法错误 #

Vite 3.x中配置全局Sass变量（Color Token通常以Sass变量形式定义），需在vite.config.js的css.preprocessorOptions中设置additionalData，注意区分Sass缩进语法和SCSS语法：

• 若使用Sass缩进语法（.sass后缀文件）：

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: {
      sass: {
        // Sass缩进语法无需分号结尾
        additionalData: `@import "@/styles/color-tokens.sass"`
      }
    }
  }
})

• 若使用SCSS语法（.scss后缀文件）：

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: {
        // SCSS语法必须加尾部分号
        additionalData: `@import "@/styles/color-tokens.scss";`
      }
    }
  }
})

注：路径别名@需提前配置，否则直接写相对路径（比如./src/styles/color-tokens.scss）也可。

2. Color Token文件的语法错误 #

确保全局Token文件的变量定义符合语法规范：

// src/styles/color-tokens.scss
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;

若用Sass缩进语法：

// src/styles/color-tokens.sass
$primary-color: #1890ff
$success-color: #52c41a
$warning-color: #faad14

3. 组件中使用变量的方式错误 #

在Vue单文件组件的<style>标签中直接使用全局变量即可，无需重复导入：

<template>
  <div class="demo-box"></div>
</template>

<style scoped>
.demo-box {
  background-color: $primary-color;
}
</style>

注意：若<style>标签指定了lang="sass"或lang="scss"，需和全局Token文件的语法保持一致。

4. 依赖环境兼容性排查 #

当前使用的Node.js 18.13.0、Vite 3.2.4、Sass 1.56.1版本组合是兼容的，若仍报错，可尝试：

• 删除node_modules和package-lock.json（或yarn.lock）
• 重新执行npm install
• 重启Vite开发服务

报错排查通用步骤 #

根据具体报错信息定位问题：

• 若报错Undefined variable：检查全局文件路径是否正确、变量是否在文件中定义、additionalData语法是否匹配所用的Sass规范
• 若报错Cannot find module：检查全局Token文件的路径是否写错、别名@是否配置生效
• 若报语法错误：检查全局Token文件的代码是否符合Sass/SCSS语法规则

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