SCSS编译后背景图片路径失效问题求助

这个问题我帮很多开发者踩过坑，核心原因很简单：SCSS编译过程不会自动调整相对路径——你写的路径是相对于.scss文件的位置，但编译后的.css文件在不同目录，路径自然就不对了。

先明确咱们的项目路径对应关系：

• style.scss 位置：project/scss/style.scss → 相对于它的图片路径是../../img/image.jpg（跳出scss到项目根目录，再进入img）
• 编译后的style.css 位置：project/css/style.css → 相对于它的图片路径应该是../img/image.jpg（跳出css到项目根目录，再进入img）

下面给你三个靠谱的解决方案：

1. 使用根路径（最省心的方案） #

如果你的项目部署后有固定的根目录，直接用以/开头的绝对路径，这样不管CSS文件放在哪，都会从项目根目录开始找图片：

.bg-container {
  background-image: url('/img/image.jpg');
}

这个方法适合大多数现代项目，不用纠结层级关系，一劳永逸。

2. 直接写编译后CSS对应的相对路径 #

既然知道编译后的CSS在css文件夹，直接在SCSS里写相对于CSS文件的路径就行——SCSS只会原样编译这个路径，不会修改它：

.bg-container {
  background-image: url('../img/image.jpg');
}

编译到style.css后，这个路径刚好是正确的，能直接定位到img/image.jpg。

3. 用SCSS变量统一管理图片路径（适合复杂项目） #

如果项目目录结构可能变动，或者有很多图片需要引用，可以定义一个变量来存储图片基础路径，后续修改只需要改变量：

// 这个路径是相对于编译后的CSS文件的
$base-img-path: '../img/';

.bg-container {
  background-image: url(#{$base-img-path}image.jpg);
}

为什么原来的路径会失效？ #

你在SCSS里写的../../img/image.jpg，是相对于scss文件夹的路径。编译到css文件夹后，这个路径的含义就变成了：从css文件夹往上跳两级（跳出了整个project目录），再找img/image.jpg——这显然找不到正确的文件，所以图片就显示不出来了。

内容的提问来源于stack exchange，提问作者Martin Zahariev