现代前端通过构建工具自动注入CSS：Webpack需css-loader+style-loader（开发）或mini-css-extract-plugin（生产），Vite原生支持CSS Modules与自动注入，依赖图识别+运行时插入标签实现，需注意SSR、重复注入及类名绑定限制。
在现代前端工程中，CSS 模块化通常不靠手动 <link> 引入，而是借助构建工具（如 Webpack、Vite、Rollup）在编译时自动处理并注入样式。核心思路是：把 CSS 当作模块导入，构建工具负责提取、作用域隔离（如 CSS Modules）、压缩，并最终注入到页面中（内联或生成独立文件）。
Webpack 中自动注入 CSS
Webpack 本身不理解 CSS，需配合 css-loader 和 style-loader（开发环境）或 mini-css-extract-plugin（生产环境）：
-
开发时：用
style-loader把 CSS 通过<style></style>标签动态插入，支持 HMR（热更新）； -
生产时：用
mini-css-extract-plugin提取为单独的.css文件，再由 HTML 插件自动注入<link>； - 启用
modules: true可开启 CSS Modules，类名自动哈希化，避免全局污染。
Vite 中开箱即用的 CSS 处理
Vite 原生支持 CSS 模块化，无需额外配置 loader：
- 直接
import './index.module.css'即可启用 CSS Modules，导出的类名对象可直接用于 JSX/TSX； - 普通
import './index.css'会自动注入到（开发时）或提取为style.css（构建时）； - 支持
@import、CSS 预处理器（Sass/Less）、PostCSS 插件（如 autoprefixer）默认集成。
自动注入的关键机制
构建工具实现“自动注入”的本质是：
立即学习“前端免费学习笔记（深入）”；
-
依赖图识别：当 JS 模块
import一个 CSS 文件，构建工具将其纳入依赖图； -
运行时注入逻辑：
style-loader或 Vite 的运行时注入代码会在 JS 执行时创建<style></style>标签并 append 到 head； -
按需加载支持：配合动态
import()，CSS 也可实现代码分割和懒加载（如路由级样式分离）。
注意事项与常见问题
自动注入虽方便，但需注意：
- 服务端渲染（SSR）场景下，JS 还未执行，
<style></style>标签可能未及时注入，需用collectStyles或框架专用方案（如 Next.js 的styled-jsx）提取； - 多个入口或异步模块重复引入同一 CSS，可能导致样式重复注入（可通过
css-loader的onlyOne或构建插件 dedupe）； - CSS Modules 的类名映射只在 JS 中有效，HTML 模板中无法直接使用，需通过
className={styles.xxx}绑定。
