CSS中url()路径失效的根本原因是其以CSS文件自身位置为基准解析，而Vite构建后提取CSS导致目录结构变化，相对路径未被重写；需用import动态引入或public目录绝对路径解决。
为什么打包后CSS里url()路径失效了
CSS文件内部的url()路径，永远以该CSS文件自身位置为起点解析，和HTML中<link href="...">的路径完全无关。Vite构建时会提取CSS、重排目录（比如把src/css/style.css挪到dist/assets/style.xxxx.css），但不会自动重写url(../img/logo.png)里的相对路径——除非你用import或new URL()让Vite介入处理。
- 开发时
url(../img/logo.png)能加载，是因为CSS和图片还在原目录结构里 - 打包后CSS被移到
dist/assets/，而图片可能在dist/img/，../img/就指向了错误位置 - 直接把图片放
public/并改用url(/img/logo.png)可绕过此问题，但失去哈希和自动复制能力
Vite配置base没生效的常见原因
base只控制HTML中生成的<script src>、<link href>等资源引用前缀，对CSS内部url()无效。如果你改了base: '/my-app/'但CSS里背景图还是404，说明问题不在base本身。
- 检查
dist/index.html里<link href>是否真带上了/my-app/前缀，没出现说明配置未被build读取（比如用了--mode但config没做环境分支） -
base: './'在GitHub Pages子路径下会失效，必须用base: '/repo-name/' - 若同时用了
<base href>标签，它会覆盖Vite生成的路径逻辑，引发连锁错误
SCSS/LESS中图片路径错乱的修复方式
预处理器本身不处理路径重写，Vite的CSS插件也不会主动修正url()里的相对路径。尤其当SCSS编译后CSS被提取到新目录，原始相对路径就断了。
- 推荐方案：用
import代替url()，例如import logoUrl from '@/assets/logo.png'，再在CSS-in-JS或内联样式中使用 - 次选方案：把图片放进
public/，然后在SCSS里硬写url(/logo.png)——前提是部署路径和base一致 - 避免方案：
url(./logo.png)或url(../assets/logo.png)，这类路径在构建后极易失效，且无法被Vite校验
第三方库CSS路径找不到怎么办
像v-viewer这类依赖自带CSS的库，其node_modules/viewerjs/dist/viewer.css里的url()路径是按原始发布结构写的，Vite默认不会重写它。
立即学习“前端免费学习笔记（深入）”；
- 最稳做法：在入口JS里显式
import 'viewerjs/dist/viewer.css'，确保Vite走完整处理流程 - 若用pnpm，可能因硬链接隔离导致CSS文件不可达，加
shamefully-hoist=true到.npmrc可缓解 - 别在
vite.config.ts里盲目加css.preprocessorOptions，这不解决路径问题，只影响语法解析
真正容易被忽略的是：CSS文件自身的url()路径和HTML的base配置是两条独立链路，一个改了另一个未必跟着动。排查时得分开验证——先看dist/index.html里脚本链接是否正确，再打开dist/assets/*.css查里面的url()是否指向真实存在的文件路径。
