Vite支持预处理器但报“Cannot find module 'sass'”是因为它仅内置解析逻辑，不自带编译器，必须手动安装sass（Dart Sass）或less等对应编译器包作为开发依赖，否则启动时因缺少运行时依赖而报错。
不用装插件也能用 Sass/Less，但必须装对应编译器包，否则直接报错
为什么 vite 说支持预处理器却报 Cannot find module 'sass'
Vite 确实内置了对 .scss、.less 等后缀的解析逻辑，但它不自带编译器。它只是“知道怎么调用”，真正干活的 sass 或 less 包得你自己装。
- 不装
sass：引入.scss文件时，开发服务器启动失败，报Cannot find module 'sass'或Failed to resolve import - 不装
less：同理，.less文件会触发Cannot find module 'less' - 别用
node-sass：已废弃，Vite 5+ 不兼容；必须用sass（Dart Sass）
sass 和 less 的安装命令要写对
安装命令取决于你用的包管理器，且必须加 -D（开发依赖）：
npm install -D sassyarn add -D lesspnpm add -D stylus
装完后，立刻就能在项目里创建 index.scss 或 theme.less 并 import，不需要改 vite.config.js —— Vite 默认就识别这些后缀。
立即学习“前端免费学习笔记（深入）”；
preprocessorOptions 是干啥的？什么时候才需要配
这个配置只影响「经过预处理器编译的文件」，比如 .scss，对纯 .css 完全无效。常见用途是注入全局变量：
- 想让所有
.scss文件自动@use "@/styles/variables"，就配css.preprocessorOptions.scss.additionalData - 路径别写
@/别名：Vite 在additionalData里不解析别名，得用path.resolve(__dirname, 'src/styles/variables.scss') - 如果误把
reset.css的内容塞进additionalData，它不会生效——因为.css文件根本不走 Sass 编译流程
构建后 CSS 顺序乱了？不是配置问题，是写法问题
开发时样式热更正常，构建后出现 Undefined mixin 或变量未定义，大概率是因为：
- 多个组件各自
@import同一个_mixins.scss，但构建阶段 Vite 把所有 CSS 提取合并成单个style.css，顺序不可控 - 解决办法：所有
@mixin、$var必须集中在一个入口 SCSS 文件（如src/styles/index.scss），再由它统一@use其他模块 - 组件级样式文件（如
Button.module.scss）只写规则，禁止定义变量或 mixin
真正容易被忽略的是：预处理器能力本身没问题，但构建时的 CSS 提取机制和开发时的动态注入逻辑完全不同，写法必须适配这一差异。
