scss 不支持中文变量名，因语法规范要求变量名必须以字母或下划线开头，中文字符不在合法标识符范围内，解析器在词法分析阶段直接报错，无法通过转义、配置或工具链绕过。
SCSS 不支持中文变量名，所有含中文的 $ 变量都会在词法解析阶段直接报错，无法通过转义、注释或配置绕过。
为什么中文变量名会触发编译失败
SCSS 语法规范明确要求变量名必须以字母或下划线开头，后续字符只能是字母、数字、下划线或连字符（-）。中文字符不属于合法标识符范围，Dart Sass（当前标准）和旧版 LibSass 都会在解析第一行时就中断，错误信息类似：Invalid CSS after "$": expected identifier, was "中文"。
这不是编码问题（UTF-8 正确也无效），也不是 Webpack 或 Vite 配置能干预的层面——它卡在 Sass 编译器最底层的 tokenization 阶段。
- 连
$颜色: red;这种看似简单的写法也会失败 -
$color-中文: red;同样不行，因为开头不是字母或_ - 试图用 Unicode 转义如
$\4F59\8272: red;也不被支持，Sass 不解析此类转义为标识符
正确替代方案：用英文命名 + 注释说明语义
保持变量名合法的前提下，兼顾可读性与团队协作。不要追求“字面直译”，而要选准确、简短、符合 CSS 社区惯例的英文词。
- 用
$primary-color替代$主色，而不是$zhuse或拼音缩写 - 组件级变量加前缀：
$btn-primary-bg、$card-header-padding - 在变量声明后加单行注释说明中文含义：
// 主色调（品牌蓝） - 整个变量文件顶部加块注释，统一说明命名逻辑，比如：
// $text-default → 默认文字色｜$border-light → 浅边框色
容易踩的坑：以为“加引号”或“改 loader 就能解决”
有人试过把中文变量包在引号里、或修改 sass-loader 的 implementation、甚至加 BOM 头，这些都无效。原因很直接：
-
$"主色": red;是语法错误，Sass 解析器根本不认这种结构 -
sass-loader只是转发源码给 Dart Sass，不参与变量名合法性校验 - VS Code 或 WebStorm 的“保存自动转码”功能对变量名无影响，它只处理文件编码
- 如果项目里混用了
@import和@use，错误可能被掩盖成“变量未定义”，但根源仍是非法命名导致模块加载失败
真正难调试的是那些藏在第三方 SCSS 文件里的中文变量——比如某个老旧 UI 组件库的 _mixins.scss 里写了 $弹窗宽度: 400px。这种文件不会报错，但会导致整个 @use 链路静默失效。遇到编译中断又找不到自己代码的问题，优先全局搜索 $[\u4e00-\u9fa5]（中文字符正则）定位非法变量位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
