Vite需手动安装sass/less等预处理器包并配置css.preprocessorOptions，全局变量用additionalData注入，全局CSS需显式import，构建时CSS顺序问题需统一入口SCSS文件。
怎么在 Vite 里配 Sass/Less/PostCSS，让 @import 不报错
Vite 默认支持 .scss、.sass、.less、.styl，但不等于“开箱即用”——缺编译器就直接报 Failed to resolve import 或 Cannot find module 'sass'。
必须手动装对应预处理器包，且注意版本兼容性：
-
sass（Dart Sass）是当前推荐，装npm install -D sass；别用已废弃的node-sass -
less装npm install -D less，Vite 会自动读lessOptions - PostCSS 不用单独配插件，Vite 内置支持
postcss.config.js，但要注意：Vite 5+ 默认启用postcss8.x，若项目用了旧版插件（如autoprefixer9.x），得升级或加postcss兼容层
全局变量注入（比如统一颜色变量）要靠 scss 的 additionalData 或 less 的 modifyVars，不是靠 @import 写在每个文件头。
Vite 的 css.preprocessorOptions 怎么写才不被忽略
这个配置只对预处理器生效，纯 CSS 文件完全不走它。常见错误是把全局 CSS reset 写进 additionalData，结果发现没生效——因为 reset 是 .css 文件，压根不经过 Sass/Less 编译器。
立即学习“前端免费学习笔记（深入）”；
正确做法分两步：
- 全局样式变量（如
_variables.scss）用preprocessorOptions.sass.additionalData注入：css: { preprocessorOptions: { sass: { additionalData: '@use "@/styles/variables" as *;' } } } - 全局 CSS（如
reset.css、base.css）必须在入口 JS 或main.css里显式@import，或者通过css.devSourcemap等开关间接影响，但不能靠preprocessorOptions注入 - 注意路径别写死：Vite 中
@/别名在additionalData里无效，得用相对路径或path.resolve()拼出绝对路径
为什么开发时样式热更正常，构建后 CSS 顺序乱了
根本原因是 Vite 构建阶段会把所有 CSS 提取合并成单个 style.css，而开发时是按模块动态注入的。如果多个组件都 @import 同一个 _mixins.scss，开发时没问题，构建后可能因提取顺序导致 @mixin 定义晚于调用，报 Undefined mixin。
解决逻辑很直接：
- 所有全局定义（
@mixin、@function、$var）必须集中在一个入口 SCSS 文件（如index.scss），再由它统一@use或@import其他模块 - 组件级样式文件（
Button.module.scss）只写规则，不定义变量或 mixin - 禁用
css.codeSplit（默认 true）能缓解顺序问题，但代价是无法拆分 CSS，一般不推荐
另外，build.cssCodeSplit 设为 false 后，所有 CSS 打包进一个文件，顺序由入口依赖图决定，此时确保 main.ts 最先 import './style/index.scss' 就很关键。
如何让 CSS 变量（:root）和 JS 保持同步更新
Vite 本身不处理运行时 CSS 变量同步，所谓“同步”其实是靠开发者手动维护两套值：一套写在 :root，一套写在 JS 对象里。一旦改了变量，两边就得一起动，容易漏。
稳妥的做法是只留一份源，用工具生成另一份：
- 把设计系统变量写在
tokens.json，用脚本生成:root块和 JS 导出对象 - 或者用
postcss-custom-properties插件，在构建时把 JS 里的对象注入到 CSS，但注意它不支持嵌套或计算，仅适合静态值 - 千万别在 JS 里用
document.documentElement.style.setProperty()动态改主题色然后指望 CSS 自动响应——CSS 变量是响应式的，但 Vite 不会帮你监听 JS 对象变化，得自己写响应逻辑
最常被忽略的是：CSS 变量作用域是级联的，:root 设置后，子元素继承没问题，但若组件用了 scoped，又在 style 标签里写了 :root { --color: red }，这个声明实际不会生效，因为 :root 是全局选择器，不受 scoped 影响范围约束——但它会被其他非 scoped 的同名变量覆盖，调试时很难定位。
