本文档涵盖了 Vite 全面的 CSS 处理系统，包括 CSS Modules、预处理器集成、PostCSS 转换、打包策略以及资源处理。该系统支持开发和生产两种场景，并提供优化的热模块替换 (HMR) 支持。
有关资源处理和静态文件处理的信息，请参阅 资源处理。有关构建特定优化和打包，请参阅 构建过程。
Vite 的 CSS 处理围绕三个主要插件构建，它们在转换管道中按顺序工作。主入口点是 cssPlugin 函数，它创建了核心 CSS 处理插件。
cssPlugin 函数在用户插件之前应用，并处理初始 CSS 转换，包括预处理器执行和 CSS Modules 处理。cssPostPlugin 在用户插件之后运行，负责打包、HMR 注入和资源发出。cssAnalysisPlugin 处理模块图更新和 HMR 依赖跟踪。
来源： packages/vite/src/node/plugins/css.ts294-441 packages/vite/src/node/plugins/css.ts446-1069 packages/vite/src/node/plugins/css.ts1071-1127
CSS 处理行为通过 CSSOptions 接口控制，该接口支持多种转换后端和预处理器选项。
| 选项 | 类型 | 描述 |
|---|---|---|
transformer | 'postcss' | 'lightningcss' | CSS 转换后端（实验性 Lightning CSS 支持） |
modules | CSSModulesOptions | false | CSS Modules 配置 |
preprocessorOptions | 对象 | Sass、Less、Stylus 预处理器配置 |
preprocessorMaxWorkers | number | true | 预处理器的 Worker 线程配置 |
postcss | string | PostCSS.ProcessOptions | PostCSS 配置 |
devSourcemap | 布尔值 | 在开发环境中启用 CSS Source Maps |
lightningcss | LightningCSSOptions | Lightning CSS 配置 |
来源： packages/vite/src/node/plugins/css.ts114-165 packages/vite/src/node/plugins/css.ts195-223 packages/vite/src/node/plugins/css.ts225 packages/vite/src/node/plugins/css.ts267-270
CSS Modules 通过 .module.css 模式自动检测，并通过 cssModuleRE 正则表达式进行处理。系统维护一个 cssModulesCache 来存储生成的类名映射。
CSSModulesOptions 接口提供了对作用域行为、命名约定和导出处理的配置。generateScopedName 选项允许自定义类名生成，而 localsConvention 控制导出的 JavaScript 命名格式。
来源： packages/vite/src/node/plugins/css.ts167-193 packages/vite/src/node/plugins/css.ts225 packages/vite/src/node/plugins/css.ts267-270
Vite 通过 Worker 进程支持 Sass、Less 和 Stylus 预处理器。createPreprocessorWorkerController 函数管理 Worker 线程以并行处理预处理器编译。
预处理器系统使用 artichokie 库来创建处理 CPU 密集型编译任务的 Worker 池。每种预处理器类型（sass、scss、less、styl、stylus）都有专用的 Worker 进程。
Worker 配置由 preprocessorMaxWorkers 控制，其默认值为 true（CPU 数量减 1）。Worker 会在 buildEnd 钩子中自动关闭以清理资源。
来源： packages/vite/src/node/plugins/css.ts316-334 packages/vite/src/node/plugins/css.ts1220-1253 packages/vite/src/node/plugins/css.ts1310-1350
PostCSS 集成通过 resolvePostcssConfig 函数处理，该函数从标准的 PostCSS 配置文件加载配置。系统使用一个由 ResolvedConfig 键控的 WeakMap 来缓存 PostCSS 配置。
PostCSS 配置使用 postcss-load-config 包进行解析，该包会在标准位置（postcss.config.js、.postcssrc 等）查找配置文件。解析后的配置会被缓存，以避免重复的文件系统操作。
来源： packages/vite/src/node/plugins/css.ts1181-1219 packages/vite/src/node/plugins/css.ts280-283
通过 transformer: 'lightningcss' 选项，Lightning CSS 被支持作为 PostCSS 的实验性替代方案。这提供了更快的 CSS 处理速度，并内置了自动前缀和压缩等功能。
启用 Lightning CSS 时，系统将绕过 PostCSS 处理，并使用 Lightning CSS 进行转换和压缩。lightningcss 配置对象允许微调 Lightning CSS 的行为。
来源： packages/vite/src/node/plugins/css.ts116-123 packages/vite/src/node/plugins/css.ts216-222
CSS 打包行为在开发和生产模式下有所不同。该系统支持 CSS 代码分割和单个 CSS 包生成，具体取决于 cssCodeSplit 配置选项。
在开发模式下，CSS 通过 JavaScript 模块注入到页面中，这些模块动态创建 <style> 标签。在生产环境中，CSS 被提取到单独的文件中，并通过 <link> 标签引用。
来源： packages/vite/src/node/plugins/css.ts626-931 packages/vite/src/node/plugins/css.ts943-1056
CSS 文件通常包含指向图像、字体和其他资源的 URL 引用。Vite 的 CSS 处理包含一个复杂的 URL 解析系统，该系统在开发和生产环境中都能正确处理这些引用。
CSS 插件中的 urlResolver 函数通过检查公共文件、解析导入和处理外部 URL 来处理 URL 解析。该系统处理 CSS 中的 url() 函数，并将其替换为适当的运行时引用。
资源 URL 通过 assetUrlRE 正则表达式处理，并在构建时替换为占位符。这些占位符稍后将在包生成期间解析为实际文件路径。
来源: packages/vite/src/node/plugins/css.ts377-410 packages/vite/src/node/plugins/css.ts680-735
CSS 处理管道在开发和生产模式下表现不同，以优化不同的用例。
在开发模式下，CSS 会被立即处理以供浏览器使用，并支持 HMR。
devSourcemap 时会生成 Source Maps。生产模式侧重于优化和资源提取。
cssMinify 设置应用 CSS 压缩。来源: packages/vite/src/node/plugins/css.ts554-593 packages/vite/src/node/plugins/css.ts595-624
CSS HMR 通过 cssAnalysisPlugin 实现，该插件会跟踪 CSS 导入依赖项并相应地更新模块图。该系统处理直接 CSS 导入和来自其他模块的 CSS 依赖项。
CSS 分析插件会监视 CSS 文件的更改，并在模块图中维护导入关系。当 CSS 文件发生更改时，系统会确定需要更新哪些模块，并将适当的 HMR 更新发送到浏览器。
CSS 模块具有特殊的 HMR 处理，因为它们会导出 JavaScript 对象。由于导出的值会发生变化，因此系统无法自行接受 CSS 模块更新，它会将更新传播到导入的模块。
来源: packages/vite/src/node/plugins/css.ts1071-1127 packages/vite/src/node/plugins/css.ts1088-1119