根本原因是webpack对css中url()的解析逻辑与最终文件输出位置不匹配：css-loader按css文件所在目录解析相对路径，而mini-css-extract-plugin提取后css位于dist/css/、图片在dist/img/，导致../路径失效；必须统一配置mini-css-extract-plugin和url-loader的publicpath（如'../'），而非output.publicpath。
为什么Sass背景图打包后变成404
根本原因不是路径写错了，而是Webpack对CSS中url()的解析逻辑和最终文件输出位置不匹配。Sass编译本身不处理路径，它只把background: url(../assets/img/x.png)原样传给css-loader；而css-loader在生产环境下默认把url()里的相对路径，按“CSS文件所在目录”为基准去解析——但你用mini-css-extract-plugin把CSS抽成dist/css/app.css，图片却放在dist/img/，这时../assets/img/就指向了错误层级。
必须改mini-css-extract-plugin的publicPath
这个配置项才是修复关键，不是Webpack的output.publicPath（那个只管JS和HTML引用）。它告诉mini-css-extract-plugin：“生成CSS时，里面所有url()路径要以哪个目录为起点来算相对路径”。
- 如果CSS输出到
dist/css/app.css，图片输出到dist/img/icon.png，那么publicPath应设为'../'（从css/往上一级找） - 如果图片输出到
dist/static/img/，CSS在dist/css/，则publicPath应为'../../static/' - Vue CLI项目通常用
utils.js里ExtractTextPlugin.extract()或MiniCssExtractPlugin.loader的options传入，不是改webpack.prod.conf.js的output
Sass本身报错会直接导致CSS没生成
别急着调路径——先确认CSS文件是否真的产出。如果Sass编译失败（比如SassError: Invalid CSS after "}"），整个CSS链就断了，自然没有背景图可谈。
- 打开浏览器Network面板，过滤
css，看有没有返回200的CSS请求；如果没有，问题在编译阶段 - 全局搜索
}，检查每个}后面是不是紧跟着逗号、空格或换行（尤其Vue单文件组件<style lang="scss"></style>末尾） - VS Code里开“显示空白字符”（
Ctrl+Shift+P→Toggle Render Whitespace），揪出隐藏空格 - AI生成的嵌套写法如
.btn { &--large { } },多出的逗号是高频雷区
url-loader的limit和publicPath也要同步
小图会被转成base64内联进CSS，大图才走文件引用。但url-loader也有自己的publicPath，它控制的是“当图片不转base64时，生成的url()路径前缀”。如果这里没配，大图路径照样错。
- 在
url-loader的options里加publicPath: '../'（值需和mini-css-extract-plugin一致） - 检查
limit值：默认10000字节，超过就走文件引用，必须确保这部分路径也正确 - 别依赖
assetsPublicPath这种旧配置项，Vue CLI 3+已弃用，只认loader/plugin各自的publicPath
publicPath，而是三个地方（mini-css-extract-plugin、url-loader、Sass语法）里有两个都漏了，或者值不统一。盯着Network里那个404的图片URL，反推它该在哪一层目录下，再倒查每个loader的publicPath是否指向那里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
