未渲染来自 sass 的背景图像答案

【问题标题】：Background-image from sass is not rendered未渲染来自 sass 的背景图像
【发布时间】：2021-11-15 14:55:09
【问题描述】：

以下图像是我的文件夹结构，我尝试使用 node-sass 添加背景图像，即使在显示渲染消息后也检测到节点，与背景图像 URL 相关的 scss 未添加到main.css 任何人请提出解决方案

main.scss

@import 'config';
*{
   box-sizing:border-box;
}
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;
}
// Headings
h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  //This exactly means h1.lg-heading
  &.lg-heading {
    font-size: 6rem;
  }
  &.sm-heading {
    margin-bottom: 2rem;
    padding: 0.2rem 1rem;
    background: #D8C3A5(darken($primary-color, 2), 0.5);
  }
}

a {
  color: $secondary-color;
}
header{
    position: fixed;
    z-index: 2;
    width:100% ;
}

.text-secondary{
color: $text-color;
}
main{
    padding: 4rem;
    height: 100%;

    .socials{
        margin-top: 1rem;

        a{
            padding: 0.4rem;

            &:hover{
                color:$text-color;
               @include easeOut();
            }
        }
    }
    &#home{
        overflow: hidden;
        h1{
            margin-top:20vh;
        }
    }
}

config.scss

$primary-color: #eae7dc;
$secondary-color: #e85a4f;
$text-color: #123C69;
$show-home-img: true;
$home_img: image-url('./img/bg.jpg');
$background-opacity: 0.9; 

@mixin background {

    @if $show-home-img {
        
        &#bg-img{
            background:$home_img no-repeat;
            background-attachment: fixed;
            background-size: cover;
            &:after{
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-color: rgba($primary-color,$background-opacity);
            }
        }
    }
}


@mixin easeOut{
    transition: color 0.5s ease-out
}

index.html

<body id="bg-img">
    <header>
        <div class="menu-btn">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>


            <nav class="menu-branding">
                <ul class="menu-nav">
                    <li class="nav-item">
                        <a href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a href="">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="home">
        <h1 class="lg-heading">
            Tanisha <span class="text-secondary">Gupta</span>
        </h1>
        <h2 class="sm-heading"> Web Developer, Designer & Curator</h2>
        <div class="socials">
            <a href="">
                <i class="fab fa-twitter fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-linkedin fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-medium fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-github fa-2x"></i>
            </a>
        </div>
    </main>
    <script src=js/main.js></script>
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/c28f07619f.js" crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

我可以理解您的问题，但我无法通过屏幕截图重现此问题。请在这里分享您的代码
我们需要更多信息。 bg图像是没有加载还是没有添加到生成的CSS文件中？这是两个完全不同的东西。如果它没有添加到 SCSS，请检查您的构建过程。如果已添加，请检查浏览器中的网络选项卡以查看获取的文件。
@viira 正是 scss 没有添加到生成的 css 中
你可以在这里添加你的 scss 代码
@Viira 刚刚添加了两个 scss 文件，希望这能让您更好地理解问题

标签： css sass node-sass

【解决方案1】：

图像不会渲染，因为没有background: image-url() 这样的属性，只需设置url()。您应该像这样修改属性

$home_img: url('https://picsum.photos/seed/picsum/200/300');

#bg-img {
  background: $home_img no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

<div id="bg-img" style="height: 600px; width: 600px;">
</div>

代码笔link

更新：

我已经更新了我的答案，在使用您的 HTML 对其进行分析后，我发现了问题所在。背景图像不会出现，因为您为相同的标签添加了一个伪元素，它将与背景图像重叠。考虑删除background-color

别忘了在你的main.scss文件中调用mixin

在您的 main.scss 文件顶部添加 @include background()

#bg-img{
            background:$home_img;
            background-attachment: fixed;
          z-index: 2;
            background-size: cover;
            &:after{
               // content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-color: rgba($primary-color,$background-opacity);
            }
       }

为body 标签移除这个::after 元素

更新了代码笔link

【讨论】：

更改了 $home_img: url('./img/bg.jpg');对此并喜欢你所说的但它不起作用，如果你能提供任何其他方法会很棒
然后添加你的html代码
添加了 index.html 以及请检查
是的。我找到了问题，我会在我的回答等待中更新它
非常感谢您的帮助