CSS中URL路径一律用正斜杠/，如url("images/logo.png")；反斜杠会导致转义错误，构建工具仅识别./或../开头的相对路径，且需注意大小写敏感与跨平台一致性。
Windows下CSS里用\还是/？
Windows文件路径默认用反斜杠，但CSS样式表中写url("imageslogo.png")会直接失效——浏览器把l当成转义序列，试图解析成换行符之类的控制字符，结果路径崩了。
实际只有一条铁律：CSS里的URL路径一律用正斜杠/，不管你在Windows、macOS还是Linux上写代码、跑本地服务器、甚至用VS Code预览。
-
url("images/logo.png")✅ 安全通用 -
url("images\logo.png")❌ 多余且可能被误解析（双反斜杠在CSS字符串里不构成转义） -
url("imageslogo.png")❌l变成u000A之类，路径404
Webpack/Vite等构建工具对src路径的处理逻辑
构建工具不会原样照搬你写的url()内容；它们会扫描url(...)里的字符串，当作资源依赖去解析、重写、哈希、输出到dist目录。这时候路径写法影响的是“能否被正确识别为资源”。
比如Vite默认只识别url("./xxx")或url("../xxx")这种相对路径，而url("assets/xxx")（无点开头）会被当作文本字面量跳过，后续打包后路径就断了。
- 推荐统一用
./开头：url("./images/bg.jpg") - 避免用绝对路径如
url("/public/images/bg.jpg")，除非你明确配置了publicDir且知道它不参与构建 - 别指望
url("C:\project\src\assets\x.png")能工作——构建工具根本不认盘符路径
Node.js环境读取CSS文件时的
如果你在Node脚本里用fs.readFileSync读取CSS内容再做字符串替换（比如注入CDN前缀），那代码里拼接路径时，JS字符串里的确实要小心。
例如path.join(__dirname, "css\style.css")在Windows上没问题，但若你手动拼"cssstyle.css"，s又会触发JS转义，变成css[SOH]tyle.css（SOH是ASCII 1）。
- 永远用
path.join()或path.resolve()拼路径，别手写 - 正则匹配CSS中的
url(...)时，注意\在JS字符串字面量里要写成"\\\"才能匹配一个字面反斜杠（但你根本不需要匹配它——因为合法CSS里不该出现单个） - 如果用
fs.readFile读CSS，编码设为"utf8"，别用buffer然后自己toString()，避免BOM或换行符干扰
CI/CD流水线里路径大小写和分隔符混用的坑
本地开发用Windows，CI跑在Linux容器里，这时候url("Images/logo.png")在Windows上可能碰巧能加载（NTFS不区分大小写），但一上CI就404——Linux文件系统严格区分大小写，而且只认/。
更隐蔽的是Git：Windows默认core.autocrlf=true，可能悄悄把/转成再提交（极少见但有案例），导致团队里有人拉下来就编译失败。
- 所有CSS里的路径全部小写+
/，例如url("./icons/close.svg") - CI配置里加一步检查：
grep -r "url([^)]*\\)" src/，揪出非法反斜杠 - Git全局设
git config --global core.autocrlf input，避免换行符污染路径字符串
事情说清了就结束。最麻烦的不是语法对错，而是错误发生在构建之后、部署之前——路径看着对，浏览器控制台却报404，而你得倒推三步：CSS源码写法、构建工具是否识别该资源、目标服务器的静态文件目录结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
