Vite默认支持Sass/Less等预处理器但不自带编译器，必须安装sass或less等开发依赖（如npm install -D sass），否则报Cannot find module 'sass'；全局变量需通过preprocessorOptions.additionalData（SCSS）或modifyVars（Less）注入，路径须相对vite.config.js且不支持@别名。
不用改配置就能用 Sass/Less，但不装对应编译器包就一定会报 Cannot find module 'sass' 或 Cannot find module 'less' —— Vite 只负责调度，不自带编译器。
为什么装了依赖还是报错 Cannot find module 'sass'
常见错误现象是：刚创建 index.scss，执行 vite 启动就崩，控制台明确提示找不到模块。这不是路径或配置问题，而是 Vite 在运行时尝试 require('sass') 失败。
- 必须用
sass（Dart Sass），不能用已废弃的node-sass；Vite 5+ 完全不兼容后者 - 安装命令必须带
-D（开发依赖）：pnpm add -D sass、yarn add -D less、npm install -D stylus - 装完后无需修改
vite.config.js，直接在组件里import './style/index.scss'就生效 - 如果项目同时用了多个预处理器（比如
.scss和.less），两个包都得装，缺一不可
如何注入全局变量（比如统一颜色、mixin）
想让所有 .scss 文件都能直接用 $primary-color，或者所有 .less 文件都能调 .clearfix()，不能靠在每个文件顶部写 @import——容易漏、难维护、且 CSS 文件里写 @import "./vars.scss" 会直接被当普通 CSS 解析并报错。
- Sass/SCSS 用
css.preprocessorOptions.scss.additionalData，值是字符串：additionalData: `@import "./src/styles/variables.scss";` - 路径必须相对于
vite.config.js，不能用@/别名（CSS 层不识别别名） - Less 不支持
additionalData字符串注入，得用modifyVars传顶层变量，例如：less: { modifyVars: { '@primary-color': '#1890ff' } } - 想在 Less 里复用 mixin，得额外加插件（如
less-plugin-import），否则modifyVars对.mixin()无效
多个预处理器共存时要注意什么
Vite 允许项目里同时存在 .scss、.less、.styl，但它们的处理逻辑和限制完全不同：
立即学习“前端免费学习笔记（深入）”；
- SCSS 的
@import是同步解析的，additionalData注入后，变量/mixin 能跨文件使用 - Less 的
@import默认异步，modifyVars只影响当前编译上下文，子@import文件里的变量不会自动继承 - 嵌套深度：SCSS 没硬限制；Less 超过 20 层嵌套可能触发栈溢出警告
- 构建时，Vite 不检查你写的
variables.scss是否真被 import 过——它没被引用，就不会参与编译，连语法错误都不会提示
最容易被忽略的是：全局变量文件写了但没被任何地方 import 或通过 additionalData 注入，它就彻底“隐身”——既不报错，也不生效，调试时极难定位。
