vite默认支持sass/less但不自带编译器，必须安装sass或less等开发依赖（如pnpm add -d sass），否则报cannot find module 'sass'；全局变量需通过preprocessoroptions.additionaldata（scss）或modifyvars（less）注入，路径须相对vite.config.js且不支持@别名。
直接装依赖就能用，但不装对包或路径写错，import 一写就报 Cannot find module 'sass' 或样式不生效。
装对预处理器依赖才能启动成功
Vite 不自带编译器，sass、less、stylus 必须手动安装为开发依赖，否则运行时 require() 失败。
- 用
sass（Dart Sass）：执行pnpm add -D sass，别碰已废弃的node-sass - 用
less：执行pnpm add -D less - 同时用 SCSS 和 Less：两个包都得装，缺一不可
- 装完无需改
vite.config.js，直接在组件里import './style/index.scss'就能生效
全局变量怎么注入才真正生效
css.preprocessorOptions 只影响预处理器文件（.scss、.less），对纯 .css 文件完全无效。想让所有 SCSS 文件都能用 $primary-color，不能靠每个文件顶部写 @import。
- SCSS 用
additionalData：值是字符串，路径必须相对于vite.config.js，不支持@/别名
例如：additionalData: `@use "./src/styles/variables.scss" as *;`（末尾要换行） - Less 用
modifyVars：只传顶层变量，不支持@import字符串注入
例如：modifyVars: { '@primary-color': '#1890ff' } - 别在
additionalData里写 JS 或 HTML，只允许合法 SCSS/Less 语法
为什么构建后样式顺序乱了
开发时样式按模块动态插入，构建时 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 拆分能力，一般不建议
最容易被忽略的是：Vite 不检查你写的 variables.scss 是否真被引用——没被 import 过，也没进 additionalData，它就完全不会参与编译，连语法错误都不会提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
