生产环境css失效主因是sideeffects设为false导致css被tree shaking移除，或minicssextractplugin配置错误、hmr冲突、导入顺序混乱及publicpath路径不匹配。
生产环境CSS样式失效，八成不是代码写错了，而是Webpack构建时根本没把CSS打进包里——mini-css-extract-plugin 没生效，或者被 tree shaking 干掉了。
为什么 dist 目录下压根没有 .css 文件
最典型的表象：运行 npm run build 后，dist/ 里只有 JS 和 HTML，CSS 消失了。这不是 loader 配错，而是 Webpack 根本没“看到”这些 CSS 文件需要保留。
根本原因是 package.json 中的 "sideEffects" 设置为 false，导致 Webpack 认为所有 .css 文件都没有副作用，直接删掉。
-
"sideEffects": false→ 所有未被 JSimport的 CSS 都会被移除（哪怕你在 HTML 里用<link>引入） - 正确做法是显式声明哪些资源有副作用：
"sideEffects": ["*.css", "*.scss"] - 如果项目用了 CSS Modules 或动态 import，还得加上
"*.module.css"
MiniCssExtractPlugin.loader 和 style-loader 共存导致 HMR 失效
开发时热更新（HMR）突然不工作，改完 CSS 页面没反应？大概率是 MiniCssExtractPlugin.loader 被错误地写进了开发环境的 rule 里。
这两个 loader 不能同时出现在同一个 use 数组中，否则 Webpack 会混淆加载逻辑，HMR 回调无法触发。
- 开发环境必须只用
style-loader（它支持 DOM 注入和热替换） - 生产环境才换用
MiniCssExtractPlugin.loader - 别手抖写成
use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader']—— 这样必挂 - 推荐按环境切换：
isDev ? 'style-loader' : MiniCssExtractPlugin.loader
ignoreOrder 警告背后的真实风险
构建时出现 Conflicting order. Following module has been added: ./src/styles/main.css 这类警告，很多人直接加 ignoreOrder: true 就完事。但这只是掩盖问题，不是修复。
CSS 层叠依赖顺序，顺序错会导致样式覆盖失效、伪类丢失、媒体查询错位——线上可能某天突然某个按钮变色，你查半天发现是两个 import './a.css' 和 import './b.css' 在不同文件里被引入，顺序不可控。
- 优先检查导入链：是否在 A 组件里
import了a.css，又在 B 组件里import了b.css，而 B 又被 A 引入？这会造成重复/乱序 - 把全局样式收口到一个入口文件（如
src/index.css），其他地方只用 CSS Modules - 避免在多个异步 chunk 中分别
import同一个公共 CSS 文件
publicPath 配错导致 CSS 里的图片、字体 404
CSS 文件生成了，但打开页面发现背景图是裂图、图标字体加载失败——问题不在 CSS 本身，而在 url() 解析路径上。
mini-css-extract-plugin 默认不会重写 CSS 内的 url()，它依赖 css-loader 的 url 选项 + 插件自身的 publicPath 配置协同工作。
- 确保
css-loader开启了url: true（默认开启，但自定义配置时容易关掉） - 在
MiniCssExtractPlugin.loader的 options 里显式传publicPath：{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } } - 更省心的做法是设为
"auto"：publicPath: "auto"，它会根据output.publicPath自动推导相对路径 - 注意：这个
publicPath是给 CSS 内部url()用的，和output.publicPath不是同一个东西，但要保持语义一致
真正棘手的从来不是插件怎么配，而是 CSS 的副作用、导入顺序、资源路径这三件事，在 JS 模块系统里没有天然的“顺序保证”和“副作用声明”，全靠配置补全。漏掉任意一环，都可能让样式在某个构建环境下静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
