Webpack打包后CSS中url()路径失效的根本原因是sass-loader不解析url()路径且loader链未重写第三方SCSS中的url，需配置css-loader的url、file/url-loader的include和publicPath、sass-loader的webpackImporter及includePaths。
Webpack打包后CSS里url()路径失效，根本不是路径写错了
真正的问题是：Sass编译器（sass-loader）只处理@import语句，不解析url()里的路径；而Webpack的loader链默认也不会去重写第三方SCSS文件内部的url('./fonts/icon.woff')。结果就是，构建后的CSS里原样保留url(../fonts/icon.woff)，但浏览器从/css/app.css发起请求时，向上找一级根本没fonts/目录。
常见错误现象：
- 控制台报
GET https://example.com/fonts/icon.woff 404 - Bootstrap或Element Plus的图标字体全显示为方块
- 本地
npm run serve正常，npm run build后出问题
实操建议：
访问全球海洋潮汐模型。功能包括查询指定日期、时间和地点的潮高、潮汐极值及格点天气数据。
-
css-loader必须启用url: true（Webpack 5+默认开启，旧版需手动配） -
file-loader或url-loader的test规则要显式include第三方库路径：include: [path.resolve(__dirname, 'node_modules')] - 若用
url-loader，确保options.publicPath设为'../../'或相对正确层级，否则生成的url(static/fonts/icon.abc123.woff)仍会错位
sass-loader的webpackImporter: true没开，@import '~xxx'就等于白写
SCSS里写@import '~bootstrap/scss/bootstrap'，本质是让sass-loader把~交给Webpack resolver处理。但这个行为默认关闭——关掉webpackImporter: true，sass-loader就退化成纯Sass解析器，直接按字面意思去找./~bootstrap/scss/bootstrap，当然报Can't resolve '~bootstrap/scss/bootstrap'。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 在
sass-loader的options中必须显式写webpackImporter: true，不能只靠resolve.alias或期望它自动生效 -
~后路径必须严格匹配node_modules内真实结构，比如~@vue/component-compiler-utils不能简写成~@vue - Vite用户注意：
~在Vite中完全不识别，得用alias配/@modules/，再配合css.preprocessorOptions.sass.additionalData
includePaths没配node_modules，绝对路径@import 'node_modules/xxx'照样404
Sass本身不扫描node_modules，它只认includePaths里列出的目录。所以即使你写了@import 'node_modules/bootstrap/scss/bootstrap'，只要includePaths没包含node_modules路径，Sass编译器就找不到文件。
实操建议：
- 在
sass-loader的options中加includePaths: [path.resolve(__dirname, 'node_modules')] - 多个库混用（如Bootstrap + Normalize）时，
includePaths传数组更稳妥，避免每个@import都硬写~ - 如果第三方库主入口不是
index.scss（比如Bulma是bulma.sass），必须查清它实际暴露的文件名再写@import
部署到子目录时publicPath设成'/'，CSS里所有相对路径全崩
Vue CLI或自定义Webpack配置中，若output.publicPath或assetsPublicPath设为'/'，Webpack会把所有资源URL生成为根路径（如/static/css/app.css）。但CSS内部的url(../img/logo.png)仍以CSS文件位置为基准解析——当CSS被放到/my-app/static/css/下，../img/就指向了/my-app/static/img/，而非/my-app/img/。
实操建议：
- 部署到非根路径（如
https://example.com/my-app/）时，publicPath必须设为'./'，让资源URL相对当前HTML页面 -
css-loader和url-loader都要单独配publicPath: '../../'，确保CSS内url()生成的路径能正确回溯到资源所在目录 - 不要依赖开发时的路径直觉——打包后
dist/结构变了，所有路径都要按最终产出目录重新推演
最常被忽略的一点：第三方SCSS库内部的url()和你的项目代码里的url()走的是两套loader逻辑。前者需要include进file-loader范围，后者可能被url-loader直接转base64——漏掉任一环，字体、图片、背景图就必然404。
