SCSS文件中背景图片url()无法在页面样式中生效的问题求助

API 探路者

2026-7-29

SCSS背景图片变量失效问题

问题现象

两周前将所有CSS文件转换为SCSS文件后，除背景图片外其余功能均正常。即使是常规CSS中可正常运行的代码，经SCSS编译后内容完全一致，但背景图片仍无法显示：

.container {
  background-image: url(../../media/wood8.jpg);
}

变量尝试过程

尝试将背景图片定义为变量，以下是相关代码及现象：

包含渐变与背景图的复合变量

$background1: linear-gradient(
90deg, 
rgba(0, 0, 12, .70)0%,
rgba(14, 39, 106, 0.2)30%, 
rgba(21, 43, 102, 0.2)55%, 
rgba(22, 31, 55, 0.2)75%, 
rgba(0, 0, 12, .60))95%,
url("../../media/wood8.jpg");

调用代码：

.base1 { 
  background: $background1; 
  color: $lt;
}

注意：线性渐变可正常显示，但背景图片无法显示；且仅使用background属性时渐变才生效，使用background-color或background-image则无任何效果。

单独定义背景图变量

$wood8: url(../../media/wood8.jpg);

调用代码（无论引入复合变量还是直接调用均失效）：

.container {
  background-image: $wood8;
}

其他变量写法及调用尝试

// 写法1
$imgPath: "../../media";
$wood8: "wood8.jpg";
background: url(#{$imgPath}/#{$wood8});

// 写法2
$wood8: "../../media/wood8.jpg";
background: url(#{$wood8});

// 写法3
$wood8: url("../../media/wood8.jpg");
background: $wood8;

// 写法4
$wood8: "url(../../media/wood8.jpg)";
background: $wood8;