时间戳

首页 > 解决方案 > 将图像作为 sass 变量添加到 html-twig 文件

html - 将图像作为 sass 变量添加到 html-twig 文件

问题描述

这是一个问题，部分与之前的讨论有关：Sass 中的图像路径中有变量吗？

我正在尝试通过 Symfony 项目的树枝文件（与 HTML 非常相似）上的一个标签传递徽标图像并将特定样式应用于此徽标。

我用背景图像修复了它，它实际上可以工作，但徽标仍然没有出现在任何地方......你能帮我吗？

尽管背景图像实际上正在工作，但它给了我一个警告......

`/* variables.scss file */

$footer-icon : url('image/'+ $customer +'/icon/footer-icon.svg');

$background-image : url('image/'+ $customer +'/'+'background.jpg');
/*****************/

/*_frontend-utils.scss*/

.beforeBackgroundImage {
  overflow-x: hidden;
}

.backgroundImage {
  background-image: $background-image;
}

.afterBackgroundImage {
  background-position-y: bottom;
  background-position-x: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}
/*****************/

/* frontend.html.twig */

<div id="wrap" class="beforeBackgroundImage backgroundImage afterBackgroundImage">

/*it works! =)*/

/*****************/



/*_footer.scss*/


.footerSecond {
  display: block;
  bottom: 0;
  position: absolute;
  height: 50px;
  text-align: center;
  width: 100%;
  left: 0
}

.beforeFooterImage {
  margin: 0px;
  height: 48px;
}
/*I also tried with background-image...*/
.footerImage {
image: $footer-icon;
}
/*****************/

/*footer.html.twig*/

 <div class="pull-left"class="opacityOne beforeFooterImage footerImage">

`

我可以通过直接在标签内写入图像路径来修复它，但我想将其与代码分开

        <div class="pull-left"class="opacityOne">
            <img class="beforeFooterImage" src="{{asset('bundles/app/img/footer-icon.svg')}}" alt="" />

提前致谢

标签： htmlcsssasstwigfrontend

解决方案

推荐阅读