根本原因是webpack中sass-loader与css-loader/url-loader路径解析上下文不一致：sass-loader编译时以scss源文件为基准，而后续loader按最终css文件位置解析url()，导致构建后路径错乱；需用resolve-url-loader（置于sass-loader后、css-loader前）重写路径，并配sourcemap:true及图片loader的relative publicpath。
为什么 url() 在 SCSS 里总指向 404
根本原因不是路径写错了，而是 Webpack 处理 SCSS 的流程中，sass-loader 编译完后，url() 里的相对路径仍以原始 Sass 文件为基准，但后续 css-loader 和 url-loader 并不知道这个上下文——它们只认最终生成的 CSS 字符串，且默认按输出 CSS 文件位置解析路径。结果就是：开发时样式注入 DOM 没问题（路径相对于 HTML），构建后 CSS 单独提取成文件，路径就全乱了。
resolve-url-loader 必须放在 sass-loader 之后、css-loader 之前
它的作用是“重写” SCSS 编译产出的 CSS 中的 url() 路径，把它们从「源 Sass 文件视角」转成「最终 CSS 文件视角」。顺序错一点，它就收不到原始 url() 字符串，直接失效。
Webpack 配置中必须这样写：
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader', // ← 这里！
{
loader: 'sass-loader',
options: { sourceMap: true } // sourceMap 必开，否则 resolve-url-loader 无法定位
}
]
}
]
}
常见错误包括：
- 把
resolve-url-loader放在sass-loader前面 → 它根本看不到未编译的 SCSS，无从下手 - 没开
sass-loader的sourceMap: true→resolve-url-loader报警告 “upstream loader did not supply a source-map”，然后静默跳过重写 - 用了
sourceMapContents: true（默认值）→ 可能导致构建变慢，且某些版本会干扰路径解析，建议显式设为false
图片 loader 的 publicPath 不是 Webpack 的 output.publicPath
即使 resolve-url-loader 正确重写了路径，如果 url-loader 或 file-loader 输出的资源路径不对，还是 404。关键点在于：publicPath 必须设为相对路径（如 "../../"），且必须写在图片 loader 的 options 里，而不是 Webpack 根配置的 output.publicPath。
例如：
{
test: /\.(png|jpe?g|gif|webp)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[contenthash:8].[ext]',
publicPath: '../../' // ← 这个才是生效的！
}
}]
}
如果你部署到子目录（比如 /admin/），这个 publicPath 就得根据 CSS 文件实际所在层级动态调整；否则浏览器请求的路径和真实文件位置对不上。
Vue CLI 项目要额外注意 vue-style-loader 的兼容性
Vue CLI 默认用 vue-style-loader 替代 style-loader，而它内部不完全兼容 resolve-url-loader 的 source map 流程。现象是：开发服务器能跑，但 npm run build 后路径又错。
解决方法只有两个：
- 在
vue.config.js中强制替换 loader：
config.module
.rule('scss')
.oneOf('normal')
.use('resolve-url-loader')
.loader('resolve-url-loader')
.options({ sourceMap: true })
.end()
.use('sass-loader')
.loader('sass-loader')
.options({ sourceMap: true })
- 或干脆放弃
resolve-url-loader，改用 Vue 单文件组件内联 style +require()（适用于简单场景）
真正容易被忽略的是：SCSS 中的 @import 如果跨了多层嵌套（比如 A.scss → B.scss → C.scss），而 C.scss 里有 url("../fonts/icon.woff")，resolve-url-loader 会按 C.scss 相对于主入口的位置去算，不是按它自己所在目录——这个行为没法关，只能靠统一资源存放结构来规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
