Roots Discourse

SCSS Compile path incorrect

When I compile this SCSS
.osu-stadium { background-image: url(../images/ohio-stadium.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; background-position: center top; }

I get this
.osu-stadium { background-image: url(/app/themes/sportsmarquee/dist/images/ohio-stadium.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; background-position: center top; }

The path in the compiled CSS should be
background-image: url(../images/ohio-stadium.jpg);

This is a new install of Sage 9.x. What setting do I have wrong?

Nothing wrong, this is the expected output. If you have saved ohio-stadum.jpg in /app/themes/sportsmarquee/resources/assets/images, it should all work fine, since the images are copied into the dist directory (and optimized if building for production).

I understand that but what if I only use bedrock locally and my production structure looks like this domain.com/wp-content/themes/sportsmarquee/dist/images/

1 Like

Exactly what they are. The instructions there say to pass an environment variable when you run the build command:

SAGE_DIST_PATH=/wp-content/themes/sage/dist/ yarn build:production

In your case that would probably look like

SAGE_DIST_PATH=/wp-content/themes/sportsmarquee/dist/ yarn build:production

It throws and error but if I add single quotes around ‘/wp-content/themes/sportsmarquee/dist/ yarn build:production’ it compiles but the css still includes the /app/themes/sportsmarquee/dist/images/

What am I missing? Thanks in advance!

never-mind this needs to be done in the terminal. Sorry to waste your time.