Missing images in stylesheet on yarn build:production

sage
1

We’re running into a weird issue where images are there during a yarn start or yarn build, but some of them (not all) go missing on a yarn build:production.

For some reason the compiled css file is looking for images in wp-content/themes/theme-name/dist/images/some-broken-link.jpg

It’s about half and half, some work, some missing. Not using any css framework.

We’re referencing images just like in the docs, and just like our last few Sage builds. With a …/images

2

Hey @octoxan - that URL looks correct. Is it consistent in which images work and which ones don’t?

3

Yep.

The following code results in broken images, looking in wp-content (only on build:production)

.home-hero-container {
.home-hero-image {
	background:url('../images/kids.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	&:after {
		background-image:url('../images/Wave-Pattern.svg');
	}
	.home-hero-caption {
		background:url('../images/CrayonTexture.svg') no-repeat;
		background-size:contain;
	}
  }
}

While this code works

footer {
position:relative;
//height:350px;
margin-top:50px;
background-color:$c-brand-1;
&:before {
    position:absolute;
    top:40px;
    width:100%;
    height:26px;
    content:'';
    background:url('../images/Wave-Pattern-Line.svg');
    background-repeat: repeat-x;
    }
}

We’ve tried deleting pretty much all the sass besides the lines it hates, as well as copying the image name from the one it hates to the one it likes. o.O

4

Never mind! The developer put wp-content/themes as the path to the theme when the cli asked during initial setup. Finally found that by comparing the config file with the last project. Thanks!

1 Like