SCSS路径报错根本原因是构建期与运行时路径解析上下文不一致：@import和url()在Webpack/Vite编译时以文件自身为基准，但浏览器加载最终CSS时url()又以HTML位置为基准；解决需统一用SCSS变量定义绝对路径并插值注入，绕过构建工具自动解析。
SCSS 中的路径引用报错，根本原因不是语法写错了，而是构建时路径解析上下文和运行时 CSS 解析上下文不一致——@import、url()、background-image 里的路径，由 Webpack（或 Vite）在编译期解析，而浏览器加载最终 CSS 后再解析 url() 时，是相对于 HTML 文件位置的。
为什么 url('./logo.png') 在组件 SCSS 里会 404
当你在某个组件的 <style lang="scss"></style> 里写 background-image: url('./logo.png');，Webpack 默认以该组件文件为基准解析路径；但若该组件被抽离为独立 CSS 文件（比如通过 extract-css-chunks-webpack-plugin），最终生成的 CSS 文件可能放在 /css/chunk-xxx.css，此时浏览器加载它时，./logo.png 就变成相对于 /css/ 目录找，自然 404。
- 相对路径（
./、../）在 SCSS 编译阶段被 Webpack 处理，但仅限于@import和部分 loader 配置，url()内部默认不参与 Webpack 资源解析 - 使用
~前缀（如url('~@/assets/logo.png')）需配合file-loader或url-loader，且只在 Webpack 场景下有效，Vite 不支持 - Vite 对
url()的路径处理更严格：必须是绝对路径（以/开头）或src别名（如url('@/assets/logo.png')），且别名需在vite.config.ts显式配置
用 SCSS 变量统一管理资源路径最稳妥
把所有静态资源路径定义为 SCSS 变量，强制路径“集中声明 + 字符串拼接”，绕过构建工具对 url() 的自动解析逻辑，让路径完全可控。
- 在
src/styles/variables.scss中定义：$img-logo: 'https://cdn.example.com/logo.png'; $img-avatar: '/static/avatar-default.png'; $font-barlow: '/fonts/Barlow-BoldItalic.woff2';
- 在组件中使用：
.header { background-image: url(#{$img-logo}); } .user-avatar { background-image: url(#{$img-avatar}); } h1 { font-family: 'Barlow', sans-serif; src: url(#{$font-barlow}) format('woff2'); } - 关键点：
#{$var}是 SCSS 插值语法，它把变量值原样注入到字符串中，不触发 Webpack 路径解析，也不依赖浏览器相对定位——你写的是什么，最终 CSS 里就是什么
配合 Webpack / Vite 的路径别名仍需谨慎
即使你已配置了 @/ 指向 src/，也不要直接在 url() 里写 url('@/assets/...')，因为这不是标准 CSS 语法，纯 CSS 不认识 @/。
立即学习“前端免费学习笔记（深入）”；
- Webpack 用户：确保
url-loader或file-loader的publicPath与实际部署路径一致，否则生成的路径前缀（如/dist/）会导致线上 404 - Vite 用户：必须开启
assetsInclude支持非标准后缀（如.ttf），并在vite.config.ts中配置resolve.alias，且组件内必须用url('@/assets/...')，不能用url('./assets/...') - 跨环境兼容方案：全部走 SCSS 变量 + 绝对路径（以
/开头），部署时确保静态资源放在 Nginx 的root或alias下对应位置
小程序或 uni-app 中的特殊处理
uni-app 的 SCSS 编译由 vue-cli-service 或 HBuilderX 内置流程处理，url() 里的相对路径会被重写为 base64 或合法路径，但稳定性差——尤其当项目启用分包时，不同分包的 CSS 引用同一张图，路径上下文可能错乱。
- 推荐做法：把所有网络资源（OSS/CDN 图片、字体）地址写进
src/styles/oss.scss，用 SCSS 变量定义，再全局注入（通过sass-resources-loader或 Vite 的css.preprocessorOptions.scss.additionalData） - 避免本地路径变量混用网络路径，例如不要写
$img-logo: './logo.png';，容易在不同平台编译行为不一致 - 小程序不支持
url(data:...)字体，也不支持跨域字体，所以$font-barlow必须指向合法 HTTPS 字体服务，且服务端需配置 CORS
真正容易被忽略的是：SCSS 变量里的路径字符串，一旦拼进 url()，就彻底脱离构建工具管控。这意味着你改了变量值，必须确保对应资源真实存在且可公开访问——没有编译时校验，出错只能靠手动测试或上线后才发现。
