css变量与scss变量完全隔离，前者运行时由浏览器解析，后者编译期由sass处理；混用必失效，修复需分清场景：@use as *在嵌套模块中失效，variables.scss内禁用css规则，ide删分号致静默失败，hmr需手动刷新，:root在scoped中无效，uni-app小程序端需特殊注入。
CSS变量和SCSS变量是两套完全不互通的机制，混用必失效——前者靠浏览器解析，后者由Sass编译器处理；修复必须分清场景，按需选路。
为什么@use "@/styles/variables.scss" as *;在组件里仍报Undefined variable
根本不是路径或别名问题，而是additionalData注入后，Sass编译器仍按模块作用域判定：用了@use就必须显式命名空间，as *在嵌套@use时会失效。
-
variables.scss里如果自己又@use "sass:math"或@forward了其他模块，as *无法把深层变量“平铺”到当前作用域 - IDE自动删掉
@use末尾分号，导致注入代码语法错误，但Sass静默跳过、不报错 - HMR缓存了已编译的
<style lang="scss"></style>块，改完variables.scss后不刷新页面，变量不会重载 - 确保
vite.config.ts中配置项嵌套正确：css.preprocessorOptions.scss.additionalData，不是css.preprocessorOptions.sass.additionalData
Vue 3 + Vite项目该用@import还是@use配additionalData
短期要快、变量少、无命名冲突风险，就用@import；长期维护、团队协作、防变量污染，必须用@use并放弃as *。
-
@import "@/styles/variables.scss";→ 变量裸名可用，但重复@import可能引发样式重复输出 -
@use "@/styles/variables.scss" as v;→ 组件内必须写v.$primary-color，不能省略v.前缀 - 严禁混用：
additionalData里写@use，而variables.scss内部又用@import引第三方库，会触发module not found -
variables.scss文件里只放$xxx、@mixin xxx、@function xxx，绝对不要写任何CSS规则（如body { }）
为什么<style scoped></style>里定义:root { --x: val; }完全没效果
Vue的scoped机制会给所有选择器加[data-v-xxx]属性，但:root只匹配节点，而没有那个data属性——浏览器直接忽略整条规则。
- DevTools的Styles面板里根本看不到这条声明，Network里也查不到它被注入
-
::v-deep :root或:deep() :root无效，因为穿透语法只作用于子组件DOM，不作用于文档根节点 - 正确定义方式只有两种：
public/index.html里直接写<style>:root { --x: val; }</style>，或在main.js里import "@/styles/variables.css"（注意是.css，且不能带scoped） - Vite项目中，这个
.css文件不能通过路由组件异步import，否则首次跳转时var(--x)解析失败
uni-app微信小程序端CSS变量全失效的根本原因
不是配置错，而是小程序双线程架构决定的：CSS变量需要挂载到<page></page>节点才生效，但uni-app编译时不会把:root注入到每个页面根节点。
-
uni.scss里的:root仅参与预处理，不生成运行时样式，小程序视图层收不到 - 单页面写
<style lang="scss" global></style>能生效，但多页面就得重复写，违背“全局”本意 - 可靠解法：在
pages.json的style字段里手动为每个页面注入root样式，或用插件在构建阶段自动注入到每个page.wxss - 更彻底的方案：放弃CSS变量，改用SCSS变量+
additionalData，再通过uni-app的styleCompiler选项统一处理
最易被忽略的一点：SCSS变量和CSS变量从不自动转换，$color不会变成--color，var(--color)也不会读取$color值。它们共存可以，但必须各自走各自的链路，强行混用只会让调试时间翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
