scss中url()路径打包后404的根本原因是webpack默认不处理scss里的url()，导致相对路径以css位置为基准解析而失效；推荐用scss变量插值（如url(#{$img-bg})）注入绝对路径，彻底规避构建工具路径上下文依赖。
SCSS里url()路径在打包后404，根本不是写法问题
Webpack对SCSS中url()的处理默认是“零干预”——它只解析@import，但把url('./img/logo.png')原样输出到CSS里。浏览器加载最终CSS时，会以该CSS文件位置为基准解析相对路径，而打包后CSS常被抽离到/css/目录，导致./img/变成/css/./img/，自然找不到图。
这不是你SCSS写错了，是构建期和运行时路径上下文错位了。
- 开发时
url('../assets/logo.png')能工作，是因为Dev Server把所有请求代理到根目录 - 生产打包后CSS放在
/css/app.css，浏览器就真按/css/../assets/logo.png去请求 -
url-loader或file-loader只响应JS里的require()或import，对SCSS里的url()无效
用SCSS变量+插值绕过路径解析，最稳
不依赖Webpack loader自动重写，也不拼相对层级，直接把路径当字符串注入。这样生成的CSS里就是你写的绝对路径，浏览器照着发请求就行。
在src/styles/variables.scss里定义：
$img-bg: '/static/bg.jpg'; $img-icon: '/assets/icons/close.svg';
在组件SCSS中使用：
.header {
background-image: url(#{$img-bg});
}
.close-btn {
background-image: url(#{$img-icon});
}
- 必须用
#{$var}插值语法，不能写url($img-bg)（Sass会报错） - 路径值建议用根绝对路径（
/static/）或CDN地址，避免相对路径陷阱 - 配合Vue CLI或Vite时，这个方案完全不依赖
resolve.alias或~前缀，跨工具链也可靠
Webpack项目想继续用~前缀？得配对生效
url(~'@assets/logo.png')能生效，前提是两件事同时满足：Webpack识别~为模块路径，且url-loader或file-loader接管了该资源。
在webpack.config.js中配置别名：
resolve: {
alias: {
'@assets': path.resolve(__dirname, 'src/assets')
}
}
并在SCSS中严格按格式写：
background: url(~'@assets/logo.png');
-
~必须紧贴引号内，不能是url('~@assets/')或url(~ @assets/) - 如果用了
css-loader，要确保它的url选项没被设为false（默认true） - Vite不支持
~，得换用url('@/assets/...')并显式配置resolve.alias
别乱改publicPath，容易引发连锁错误
很多人看到CSS里路径错，第一反应是去改output.publicPath或css-loader的publicPath，但这是高危操作。
比如在ExtractTextPlugin.extract({ publicPath: '../../' })里硬写相对路径：
- 一旦CSS输出目录层级变动（比如从
/css/改成/assets/css/），所有publicPath都得重调 -
publicPath会影响JS chunk、字体、favicon等所有资源，改一处可能崩一片 - Vue CLI 5+ 和 Webpack 5 已弃用
ExtractTextPlugin，强行加publicPath可能被忽略
真正该动的是loader链路：若坚持用相对路径，优先考虑resolve-url-loader，但它要求sourceMap: true且仅对静态url()有效，动态拼接（如url(#{$base} + '/logo.png')）照样失效。
路径问题最麻烦的点在于：它看起来像配置问题，实际是构建上下文和运行时上下文的割裂。改一个地方可能临时修复，但只要上下文一变（换构建工具、改输出结构、升级loader），又得重来。用变量插值看似多写两行，换来的是路径逻辑彻底脱离构建工具约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
