Webpack中import './Button.module.css'没生效，根本原因是未正确配置css-loader的modules选项及文件匹配规则：必须用单独rule匹配/.module.css$/并启用modules: true，否则所有.css文件被统一处理导致全局类哈希化失效。
Webpack 默认不支持 import 任何非 JS 文件，CSS 模块化必须靠 css-loader 启用并控制作用域行为——不配 modules: true，就不是 CSS Modules；配了但没处理好路径或类名映射，照样白写。
为什么 import './Button.module.css' 没生效？
根本原因是：你可能只写了 modules: true，但没告诉 Webpack 哪些文件走模块化流程。Webpack 不会自动识别 .module.css 后缀，必须显式匹配。
- 错误配置：
{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true } }] }→ 所有.css都走模块化，全局类（如body、reset.css）全被哈希重命名，页面直接“失色” - 正确做法：用两个 rule 分开处理，一个专盯
.module.css，一个留给普通 CSS - 示例片段：
rules: [
{
test: /\.module\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { modules: true } }]
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: ['style-loader', 'css-loader']
}
]
css-loader 的 modules 配置项怎么选？
modules 不是布尔开关，它支持字符串值，直接影响类名生成逻辑和可维护性。
-
modules: true→ 使用默认哈希（如_btn_1a2b），适合快速验证，但不利于调试 -
modules: { localIdentName: '[name]_[local]_[hash:6]' }→ 类名含文件名和原始类名，一眼定位来源（如Button_btn_8e3f2a） -
modules: { mode: 'icss' }→ 只处理:export和:import，适合纯变量/主题导出场景，不重命名类 - 注意：
localIdentName中的[hash]默认是 md4，若需兼容旧构建缓存，可加hashFunction: 'xxhash64'
import 语句里拿到的对象为什么是空的？
常见于开发环境热更新（HMR）期间或配置遗漏，本质是 CSS 文件未被正确解析为 JS 模块对象。
立即学习“前端免费学习笔记（深入）”；
- 检查是否漏了
css-loader—— 没它，import返回的是空对象或原始字符串 - 确认
use数组顺序：必须是['style-loader', 'css-loader']，反了会报Cannot read property 'toString' of undefined - 如果用了
postcss-loader，且 CSS 里有@import，必须设importLoaders: 1或更高，否则被引入的文件不走 PostCSS 处理 - Vue 项目要注意：不能混用
vue-style-loader和style-loader，二者不兼容；Vuetify 等 UI 库建议用vue-style-loader替代
图片路径在模块化 CSS 里 404 怎么修？
模块化本身不影响 url() 解析，但路径解析失败往往卡在 loader 链末端 —— css-loader 解析完，后续 loader（如 file-loader 或 asset-module）没接住。
- Webpack 5+ 推荐用
type: 'asset/resource'处理图片，而非老式url-loader - 确保
css-loader在assetrule 之前执行；否则url('./img/logo.png')不会被识别为依赖 - 若用
MiniCssExtractPlugin提取 CSS，图片路径需配合publicPath或output.publicPath调整，否则生产环境相对路径失效 - 小图可启用
data-uri：在css-loader的options里加url: true（默认开启），再配assetModuleFilename控制输出位置
真正麻烦的从来不是配对 loader，而是搞清每个 loader 的输入输出边界：谁负责把 url() 变成模块请求，谁负责把模块变成 URL 字符串，谁又负责把字符串塞进 DOM —— 这三层一旦断开，样式就静默消失，连报错都没有。
