SCSS Compile path incorrect

toddsantoro · October 8, 2019, 1:19pm

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?

Jan-Klaas · October 8, 2019, 6:21pm

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).

toddsantoro · October 8, 2019, 9:26pm

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/

alwaysblank · October 8, 2019, 10:14pm

github.com

roots/sage/blob/bd38502616188be973f60b75717eea95c1fc69d2/resources/assets/build/config.js#L43-L51


/**
 * If your publicPath differs between environments, but you know it at compile time,
 * then set SAGE_DIST_PATH as an environment variable before compiling.
 * Example:
 *   SAGE_DIST_PATH=/wp-content/themes/sage/dist/ yarn build:production
 */
if (process.env.SAGE_DIST_PATH) {
  module.exports.publicPath = process.env.SAGE_DIST_PATH;
}

alwaysblank · October 8, 2019, 10:22pm

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

toddsantoro · October 8, 2019, 10:25pm

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!

toddsantoro · October 8, 2019, 10:29pm

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

itIsinspiring · November 13, 2019, 11:17am

thank you, this is helping for me

itIsinspiring · November 13, 2019, 11:19am

thank you for your help everyone.
Could you tell me where to change the value of this SAGE_DIST_PATH variable ? or should a change and uncomment this line 49 ?
thans

itIsinspiring · November 13, 2019, 11:44am

OK I FOUND IT !
i had to change the value of “publicPath” as “/wp-content/themes/#MYTHEME#”, in the ‘resources/assets/config.json’