Vite 对 CSS 预处理器和样式隔离分层处理：预处理器需手动安装编译器并配置注入，样式隔离依赖 .module.* 命名约定实现类名哈希与导出映射，二者协同但职责分明。
Vite 对 CSS 预处理器和样式隔离的处理，不是靠“自动开箱即用”，而是分层明确、各司其职：预处理器负责编译逻辑（如变量、嵌套、mixin），样式隔离靠文件命名约定与模块机制，二者互不干扰但可协同使用。
预处理器配置要装包 + 显式注入
Vite 支持 .scss、.sass、.less 等后缀，但仅表示“识别语法”，不提供编译能力。必须手动安装对应编译器：
- Sass 推荐装
sass（Dart Sass）：pnpm add -D sass - Less 装
less：pnpm add -D less - PostCSS 不需额外插件，Vite 内置支持
postcss.config.js，但注意版本兼容（如 autoprefixer 9.x 需升级或加兼容层）
全局变量或混入不能靠每个文件写 @import，而应通过 vite.config.js 的 preprocessorOptions 注入：
- SCSS 示例：
additionalData: '@use "@/styles/variables" as *;' - Less 示例：
modifyVars: { 'primary-color': '#1DA57A' } -
注意：@/ 别名在
additionalData中无效，要用相对路径或path.resolve()
样式隔离靠 .module.css 后缀触发
Vite 默认对所有 CSS 文件做模块化处理，但真正启用“作用域隔离”需显式命名：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 文件名含
.module.css、.module.scss或.module.less，才开启类名哈希 + 导出映射对象 - 例如
Button.module.scss中的.root会被编译为Button_root_abc123，并在 JS 中导出{ root: 'Button_root_abc123' } - 想局部保留全局样式，用
:global(.btn)包裹即可
普通 .css 或 .scss 文件不会被重命名，也不导出类名映射，适合写 reset、base 等基础样式。
CSS 加载顺序必须靠导入链控制
Vite 按模块依赖顺序合并 CSS，开发时动态注入，构建时提取为单个 style.css —— 这会导致顺序敏感问题：
- 变量定义晚于使用？把
_variables.scss和_mixins.scss全部@use进一个入口index.scss，再让所有组件样式@import它 - reset 被覆盖？在入口 JS（如
main.ts）中，最先 import./reset.css，再 import 其他样式 - 避免在多个组件里重复
@import同一预处理器文件，否则构建阶段可能因提取时机导致@mixin未定义
构建与开发行为差异要提前规避
热更新时样式按需加载，看着正常；构建后 CSS 合并，就暴露顺序和作用域问题：
- 不要把全局 reset.css 的内容塞进
additionalData—— 它是纯 CSS，不走预处理器，注入无效 - 测试环境用 JSDOM 时，
getComputedStyle返回空？确保元素已挂载到文档，且 CSS 字符串已通过insertRule显式注入 - Ant Design Vue 等 UI 库的样式定制，推荐用
ant-design-vue/dist/antd.less全局引入，配合modifyVars覆盖变量
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
