1

This is a question, partially related to a previous discussion: Have a variable in images path in Sass?

I'm attempting to pass a logo image and apply an specific style to this logo through one of my labels on a twig file (quite similar to HTML) on a Symfony Project.

I fixed it with the background image, which actually is working, but the logo still doesn't appear anywhere... Could you help me with that?

Despite the background image is actually working, it gives me a warning...

`/* 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">

`

I could fix it by directly writing the image path inside the label, but I'd like to separate this from the code

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

Thanks in advance

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
javadvagu
  • 13
  • 5
  • I'd like to add more information by clarifying that all the files are properly linked on a main.scss and the image paths are correct (I wrote them differently) – javadvagu Jul 24 '18 at 10:08
  • What's kind of warning? .footerImage has not `}` close in the end. Is this the problem? – ReSedano Jul 24 '18 at 10:32
  • No, I just forgot to copy the bracet. This is the warning that appears, but still works: Element 'background-image' is resolved only by name without use of explicit imports less... (⌘F1) This inspection warns about SASS/SCSS elements that are not imported explicitly and resolved through all project SASS or SCSS files only by name. You have no guaranties that these elements will be resolved at the production. – javadvagu Jul 24 '18 at 11:19

0 Answers0