Vite 中配置 CSS 预处理器和模块化只需安装对应依赖、遵循命名规范并做少量配置：Sass/SCSS 用 pnpm add -D sass 并通过 additionalData 注入全局变量，Less 用 yarn add -D less 并通过 modifyVars 设置变量；CSS 模块化靠 .module.css 等命名自动启用，支持类名哈希与作用域隔离。
在 Vite 中配置 CSS 预处理器（如 Sass、Less）和 CSS 模块化，本质上是两件独立但常一起使用的事：预处理器负责语法扩展（变量、嵌套、mixin 等），模块化负责样式作用域隔离。它们都不需要复杂插件，核心是装对依赖 + 命名规范 + 少量配置即可生效。
装依赖：预处理器编译器必须显式安装
Vite 本身不带编译器，只做调度。不装对应包，启动就报 Cannot find module 'sass' 或 Cannot find module 'less'。
- Sass/SCSS：运行
pnpm add -D sass（推荐 Dart Sass；node-sass已废弃，Vite 5+ 完全不兼容） - Less：运行
yarn add -D less - Stylus：运行
npm install -D stylus - 多个共存？全部装——
.scss和.less文件同时存在时，两个编译器缺一不可
直接用：无需改 vite.config.js 就能 import
装完依赖后，不用动任何配置，就能在组件中直接导入：
-
import './styles/index.scss'—— SCSS 语法正常解析，嵌套、变量、@import全支持 -
import './styles/theme.less'—— Less 变量（@primary-color）、嵌套、&也立即可用 - 注意：路径必须真实存在，且不能用
@/别名（CSS 层不识别 vite 别名）
注入全局变量：按预处理器类型区别处理
想让所有 .scss 文件都能用 $color-primary，或所有 .less 文件都能用 @text-size，不能靠每个文件顶部写 @import。
立即学习“Java免费学习笔记（深入）”；
-
Sass/SCSS：在
vite.config.js的css.preprocessorOptions.scss.additionalData中注入字符串，例如：additionalData: `@import "./src/styles/variables.scss";`
路径必须相对于vite.config.js，且该文件必须被至少一个 SCSS 文件实际引用，否则不会参与编译（连语法错误都检测不到） -
Less：不支持
additionalData字符串注入。改用css.preprocessorOptions.less.modifyVars传顶层变量，例如：modifyVars: { '@primary-color': '#1890ff', '@font-size-base': '14px' }
注意：这只能注入简单变量，不能注入 mixin；若需全局 mixin，得额外加less-plugin-import插件
CSS 模块化：靠文件命名自动启用
Vite 默认不把普通 .css 当模块，但只要文件名含 .module，就会自动开启模块化（类名哈希化、作用域隔离）。
- 命名示例：
Button.module.scss、Layout.module.less、index.module.css - 导入方式：
import styles from './Button.module.scss'→styles.container会变成类似Button_container_abc123的唯一类名 - 局部类名支持驼峰：
.app-title可通过styles.appTitle访问 - 需要全局样式？用
:global(.btn)包裹，它不会被哈希，可直接在 JSX 中写className="btn" - 如需自定义哈希规则（比如加项目前缀），可在
vite.config.js中配置css.modules.generateScopedName
