node-sass编译Sass时background-image未生成到CSS不渲染问题求解

问题原因排查及解决方案 #

核心问题1：mixin未调用 #

你在config.scss中定义了@mixin background 用于渲染背景图相关样式，但全程没有在main.scss中调用这个mixin，所以这部分代码不会被编译输出到最终的css文件中，这是背景图样式缺失的最主要原因。

核心问题2：图片路径函数不兼容 #

node-sass默认没有内置image-url()函数，该函数是特定框架的扩展函数，直接使用会导致样式失效。

核心问题3：语法错误 #

main.scss中.sm-heading的background属性写法不符合SCSS语法规范，可能会干扰编译流程。

具体修复步骤 #

1. 修正config.scss中的图片路径变量
   把$home_img: image-url('./img/bg.jpg');修改为标准CSS路径写法：

// 注意路径是相对于编译后生成的main.css的存放位置，不是scss源文件位置
// 如果编译后的main.css放在css文件夹下，路径要改成../img/bg.jpg
$home_img: url('./img/bg.jpg');

2. 在main.scss中调用background mixin
   找到main.scss中的body样式块，新增一行调用mixin的代码：

body {
  background-color: $primary-color;
  height: 100%;
  color: $secondary-color;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
  // 新增这行调用背景mixin
  @include background();
}

3. 修正.sm-heading的错误语法
   把原来错误的background写法：

background: #D8C3A5(darken($primary-color, 2), 0.5);

修改为合法的rgba写法，如果你要使用加深后的主色带透明度：

background: rgba(darken($primary-color, 2), 0.5);

如果要使用#D8C3A5这个颜色带透明度，就改成：

background: rgba(216, 195, 165, 0.5);

修改完成后重新编译SCSS即可看到背景图样式正常生成。

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