Build:production paths

Hi, just clarifying something on asset paths in CSS, not sure if this is a bug or not.

in resources/assets/styles/common/_global.scss when i write something like:

  body{
    background: url(../../images/image.png);
  }

yarn start and yarn build work without error, and the CSS compiles with a correct path to the image… but build:production fails spectacularly due to the path being wrong. This also prevents deploys with the Trellis deploy hooks active.

The below path in CSS works with yarn start, yarn build and yarn build:production, however my editor (phpstorm) tells me the path to the asset is wrong.

  body{
    background: url(../images/image.png);
  }
  • The image is placed into resources/assets/images/

  • The exact same issue occurs with font assets in /resources/assets/fonts

Should we be referencing all assets as if we were writing all css in from the root .scss file, or should we dot slash our up and down the folder structure? I’m not even certain which is correct practice in scss.

Your editor is lying to you :stuck_out_tongue:

Referencing images from your styles is always done as ../images/example.png. This isn’t new in Sage 9 — it’s been this way for many years and major versions.

Sweet, thanks for the clarification

I’d be interested to know what the best practice is here actually, as I’ve just discovered the yarn build:production script breaks with the font paths set by a particular slider plugin too.

I’ll do some research and report back :slight_smile: