开发环境样式丢失是因为硬编码MiniCssExtractPlugin.loader，它不支持开发时样式注入；必须用process.env.NODE_ENV动态切换为style-loader，否则HMR失效、白屏。
开发环境样式丢失，是因为 loader 没动态切换
硬编码 MiniCssExtractPlugin.loader 到 module.rules 里，会导致 webpack serve 启动后页面白屏——它在开发阶段不注入样式，只参与构建时提取。必须根据 mode 动态决定用 style-loader 还是 MiniCssExtractPlugin.loader。
推荐写法是抽一个 getCssLoaders 函数：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
function getCssLoaders(isProduction) {
return isProduction
? [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
: ["style-loader", "css-loader", "sass-loader"];
}
module.exports = {
mode: "development",
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: getCssLoaders(process.env.NODE_ENV === "production"),
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash:8].css",
}),
],
};
SCSS 文件没被提取，检查 test 正则是否覆盖 .scss 和 .sass
test: /\.scss$/i 只匹配 .scss，漏掉 .sass（缩进语法）；test: /\.s[ac]ss$/i 才能同时覆盖两种写法。否则 import "./index.sass" 会走默认 fallback，最终样式仍打包进 JS。
常见疏漏点：
立即学习“前端免费学习笔记（深入）”；
-
test写成/\.scss$/却没加i标志，导致大写.SCSS不匹配 - 用了
resolve.extensions自动补后缀，但 loader 的test没同步适配 - SCSS 文件里
@import的路径别名（如@import "~styles/vars"）未在sass-loader中配置additionalData或includePaths
打包后 CSS 顺序警告 Conflicting order，本质是 chunk 引用冲突
出现 ChunkLoadError: Loading chunk xyz failed 或控制台警告 Conflicting order between ...，通常是因为多个入口或异步模块重复引入同一份 SCSS，且提取顺序不一致。这不是插件 bug，而是 Webpack 对 CSS chunk 依赖拓扑的校验机制。
解决方向：
- 确保所有共享样式（如全局重置、变量文件）只在主入口（
entry）中import一次，不要在组件级 SCSS 里反复@import - 避免在
React.lazy或import()动态加载的模块中直接import './xxx.scss'，改用运行时注入或统一预加载 - 如果必须分块加载样式，启用
MiniCssExtractPlugin.options.ignoreOrder = true（仅限调试，上线前应修复引用逻辑）
publicPath 配置错，导致 CSS 里的字体、图片路径 404
MiniCssExtractPlugin 提取 CSS 后，里面 url(...) 引用的资源路径，由 Webpack 的 output.publicPath 决定，而不是 loader 的 publicPath 选项。如果部署到子路径（如 /app/），但 output.publicPath 没设成 /app/，字体、背景图就会 404。
关键点：
-
output.publicPath必须以/开头且结尾，例如"/static/"，否则相对路径计算出错 - 若用
file-loader或url-loader处理字体/图片，它们的publicPath选项要和output.publicPath保持一致 - SCSS 中用
~别名（如url("~assets/logo.png")）时，需确认resolve.alias已正确定义，且 loader 能识别该别名
