webpack中css不生效的根本原因是loader顺序错误或配置位置不当，正确顺序应为['style-loader', 'css-loader']，且需避免与mini-css-extract-plugin共存、升级style-loader至3.3.0+以兼容webpack 5。
Webpack打包时CSS不生效，css-loader和style-loader怎么配才对
根本原因不是“没装loader”，而是顺序或配置位置错了。Webpack要求CSS处理链必须是 style-loader → css-loader（从右到左执行），但很多人写成数组顺序反了，或者漏了style-loader——结果CSS解析了，但没插入DOM，页面当然没样式。
实操建议：
-
module.rules里配test: /\.css$/，use字段必须是数组，且顺序为['style-loader', 'css-loader'] - 不要用
loader单字段写法（如loader: 'css-loader'），它不支持链式调用 - 如果用了Sass/Less，把
css-loader放在最右，左边依次加sass-loader或less-loader - 开发环境用
style-loader没问题；但生产环境要抽离CSS，得换成mini-css-extract-plugin，此时不能共用style-loader
为什么css-loader的modules选项一开，全局类就失效了
css-loader开启modules: true后，默认只处理import './xxx.css'这种模块化引入，而HTML里<link rel="stylesheet">、JS里document.createElement('link')、甚至内联style标签，全都不走css-loader，自然不受影响——但你写的.btn { color: red }会被转成哈希类名，原始类名在DOM里根本找不到。
实操建议：
- 只对组件级CSS开
modules，比如Button.module.css；全局公共样式（如重置、工具类）单独用普通.css文件，配独立rule，关掉modules - 若必须混用，可用
localIdentName配合:global(.reset)语法包裹全局类 - 注意
css-loaderv6+默认启用modules.auto，会根据文件名自动判断是否开启模块化，*.module.css才开，避免误伤
Webpack 5里style-loader热更新失效，控制台报Cannot read property 'insert' of undefined
这是style-loader版本和Webpack 5不兼容的典型表现。v2.x及更早版本不支持Webpack 5的ModuleGraph新API，loader实例化时拿不到insert函数引用，直接崩。
实操建议：
- 升级到
style-loader@3.3.0+（当前稳定版），它明确声明支持Webpack 5 - 删掉
node_modules重装，避免残留旧版本缓存 - 检查
webpack.config.js中是否误写了options: { injectType: 'singleton' }这类过时配置，v3已改用injectType: 'auto'或'styleTag' - 如果用
MiniCssExtractPlugin，开发时别和style-loader共存于同一rule，否则HMR会冲突
打包后CSS体积暴涨，css-loader的url选项怎么控制图片引用
css-loader默认把background: url(./img.png)里的资源当成模块处理，触发file-loader或asset-module逻辑。如果没配好，小图标可能被Base64编码塞进CSS里，或者重复打包多份——体积翻倍就是这么来的。
实操建议：
- Webpack 5+ 推荐用
type: 'asset'统一接管资源，CSS里url()会自动走这个逻辑，不用额外配url: true - 若仍用
css-loader老方案，必须关掉url: true（默认为true），再手动配file-loader或url-loader，否则双 loader 冲突 - 小图（assetInlineLimit让其转Base64；大图必须生成独立文件，否则CSS体积失控
- 注意
public目录下的路径（如url(/img/logo.png)）不会被css-loader处理，直接走HTTP请求，不参与打包
最常被忽略的是：Webpack 5的asset-module和css-loader对url()的处理边界很模糊，一个配置项开或关，可能让图片既打进JS又塞进CSS，调试时得盯着dist目录里到底生成了几个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
