SCSS背景属性值无效求助：Webpack编译后样式失效问题

我来帮你一步步排查和解决这个背景图片不显示的问题：

1. 先修复HTML里的CSS加载低级错误 #

你的HTML中<link>标签的属性写错了，ref="stylesheet"应该是rel="stylesheet"——这个小错误会直接导致浏览器无法正确加载main.css，大概率是问题的导火索：

<!-- 错误写法 -->
<link ref="stylesheet" href="./main.css" type="text/css">

<!-- 正确写法 -->
<link rel="stylesheet" href="./main.css" type="text/css">

2. 替换Webpack不兼容的image-url函数 #

image-url()是Rails Asset Pipeline专属的Sass函数，Webpack环境下默认不识别这个语法，直接换成标准的CSS url()函数即可：

// 错误写法
$header-img: image-url('images/image.jpg', false, false);

// 正确写法
$header-img: url('images/image.jpg');

3. 确保Webpack配置了图片资源处理规则 #

要让Webpack正确打包图片并生成正确的路径，你需要在webpack.config.js里配置对应的资源处理规则（Webpack 5+ 推荐用asset/resource，Webpack 4可以用file-loader）：

module.exports = {
  module: {
    rules: [
      // 处理SCSS文件
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      // 处理图片资源
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // Webpack 5+ 写法
        // Webpack 4 可替换为：use: ['file-loader']
      }
    ]
  }
};

配置后Webpack会自动把图片打包到输出目录，并在编译后的CSS中替换成正确的资源路径。

4. 优化背景样式确保正常显示 #

就算路径没问题，也可能因为图片尺寸适配问题导致看不见，建议补充background-size和background-position属性：

.bg {
  background: $header-img no-repeat center center;
  background-size: cover; // 或者用contain，根据需求选择
  width: 100%;
  height: 100vh;
}

完成以上步骤后重新编译项目，背景图片应该就能正常显示了。

内容的提问来源于stack exchange，提问作者Knows Not Much