必须安装sass或less等开发依赖才能使用，否则启动报Cannot find module 'sass'；Vite不自带编译器，需pnpm add -D sass等命令安装，且全局变量注入仅对预处理器文件生效。
装对依赖才能用 Sass/Less，别碰 node-sass
Vite 7 不自带编译器，sass 或 less 必须手动安装为开发依赖，否则启动就报 Cannot find module 'sass' 或 Cannot find module 'less'。这不是配置问题，是运行时 require 失败。
- 必须用
sass（Dart Sass），node-sass已废弃且 Vite 7 完全不兼容 - 安装命令统一加
-D：比如pnpm add -D sass、yarn add -D less - 如果项目同时用
.scss和.less，两个包都得装，缺一不可 -
stylus同理，装pnpm add -D stylus即可，无需额外插件
全局变量注入只对预处理器生效，CSS 文件完全不走这个流程
css.preprocessorOptions 只影响 .scss、.less 等文件，纯 .css 文件压根不经过预处理器，所以往 additionalData 里塞 @import "reset.css" 是无效的。
- SCSS 全局变量推荐用
additionalData+@use：例如'@use "./src/styles/variables.scss" as *;'，末尾必须带换行符\n - 路径必须相对于
vite.config.js，@/别名在字符串里不解析，写错路径就静默失效 - Less 不支持
@use，改用modifyVars传简单变量（如'@primary-color': '#1890ff'），但没法注入@mixin - 想让所有
<style lang="scss">（含scoped）都能用变量，additionalData是唯一可靠方式
构建后 CSS 顺序乱了？因为提取逻辑和开发时完全不同
开发时样式按模块动态插入，构建时 Vite 把所有 CSS 提取合并成单个 style.css。如果多个文件都 @import "_mixins.scss"，构建后可能 @mixin foo 定义晚于调用，直接报 Undefined mixin。
- 所有全局定义（
$var、@mixin、@function）必须集中在一个入口 SCSS 文件（如src/styles/index.scss） - 组件级样式文件（
Button.module.scss）只写规则，禁止定义新变量或 mixin - 禁用
css.codeSplit能缓解顺序问题，但会失去 CSS 拆分能力，一般不建议 - PostCSS 插件（如
autoprefixer）要匹配 Vite 7 的 postcss 8.x，旧版插件需升级或加兼容层
Scoped 样式里用全局变量，别指望 @import 自动穿透
在 <style scoped lang="scss"> 里写 @import "@/styles/variables.scss"，Vite 会把它当普通 CSS 解析，直接报错；即使没报错，scoped 也会隔离作用域，变量根本进不去。
立即学习“前端免费学习笔记（深入）”；
- 唯一稳定方案是靠
additionalData前置注入，它发生在编译前，不受scoped隔离影响 - 别在
additionalData里写 JS 或 HTML，只允许合法 SCSS/Less 语法 - 如果
variables.scss里有顶层样式（比如.reset { ... }），会被重复注入多次，造成样式污染 - 构建阶段 Vite 不检查变量文件是否被引用——写了但没人
@use或@import，它就不会参与编译，连语法错误都不会提示
