要在 TypeScript 项目中用 Webpack 实现 CSS 模块化与样式抽离，关键是配置 CSS Modules（限定 .module.css 文件，启用 modules: { mode: 'local' } 并添加类型声明）和样式抽离（开发用 style-loader，生产用 MiniCssExtractPlugin.loader 抽离为独立 CSS 文件）。
要在 TypeScript 项目中用 Webpack 实现 CSS 模块化与样式抽离，关键在于两件事：一是让 `.module.css` 文件走模块化流程（局部作用域 + 类型安全），二是把最终生成的 CSS 提取成独立文件（而非内联在 JS 中）。这两步不冲突，可同时配置。
CSS Modules 启用与类型支持
Webpack 默认不开启 CSS Modules，需显式配置 css-loader 的 modules 选项，并限定只处理 .module.css 文件，避免影响全局样式：
- 在
webpack.config.js的module.rules中添加匹配/\.module\.css$/的规则 - 使用
style-loader+css-loader，其中css-loader启用modules: { mode: 'local' } - 为 TypeScript 添加声明文件
types/css-modules.d.ts，使import styles from './xxx.module.css'具备类型推导
示例规则：
{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}
]
}
样式抽离（CSS Extract）
开发时用 style-loader 把 CSS 注入 <style></style> 标签方便热更新；生产环境则应抽离为单独 .css 文件，利于缓存和并行加载。
立即学习“前端免费学习笔记（深入）”；
- 安装
mini-css-extract-plugin（Webpack 5+ 推荐） - 在生产环境配置中，将
style-loader替换为MiniCssExtractPlugin.loader - 在
plugins中添加MiniCssExtractPlugin实例，指定输出路径和文件名 - 注意：抽离后需在 HTML 中手动引入或由插件自动注入
TypeScript 类型与构建一致性
CSS Modules 的类名是运行时字符串，但 TypeScript 需提前知道结构。仅靠声明文件还不够：
-
types/css-modules.d.ts声明classes: { [key: string]: string }是基础，但无法校验具体类名是否存在 - 推荐配合
typings-for-css-modules-loader或启用css-loader的exportLocalsConvention生成更精确的类型定义 - 确保
tsconfig.json包含types/css-modules.d.ts所在路径（如通过"typeRoots"） - 若使用 Webpack 5 的持久化缓存，需注意 CSS 类名哈希是否稳定（建议固定
contenthash或禁用缓存以避免误判）
开发与生产环境区分配置
不能共用同一套 loader 链。典型做法是：
- 开发环境：使用
style-loader→ 热更新友好 - 生产环境：使用
MiniCssExtractPlugin.loader→ 输出独立 CSS 文件 - 通过
mode或自定义env参数动态切换规则 - 抽离后的 CSS 可进一步用
css-minimizer-webpack-plugin压缩
