Background css image and font paths

sage
1

using relative paths for images and fonts (…/…/images) etc…

Works great for yarn run start, but it errors on yarn run build:production. Are the paths different?

here is the error

    ERROR in ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss

Module not found: Error: Can’t resolve ‘…/…/images/mods/thumb-link-arrow.png’ in 'C:\xampp\htdocs\mytheme\wp-content\themes\msgpwebteam\ass
@ …/~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss 6:126209-126258

1 Like
2

Hi, I assume you are using v. 9.0.0-beta.2 and webpack?

By running yarn run build:production it will minify the images and fonts and add the corresponding ‘version’ text after the file. You can see it by viewing the dist folder.

Try changing ../../ to ../ this works for me with images in my sass files.
Ie. I’m using background-image: url(../images/empty-cart.svg); and it works fine.

With blade templates you can get src of image like this:
<img src="@asset(images/foo.jpg)" >

With fonts you can set the variable to font folder like so:
In variables.scss
$font-path: '../fonts' !default;

And then use it in your scss like this:
url('#{$icomoon-font-path}/icons.eot');

Also when using fonts included by yarn/npm you got to point it to the right folder:
I use this in variables.scss
$roboto-font-path: "~materialize-css/fonts/roboto/" !default;

(notice ~ before the folder name)

Hope this helps! :slight_smile:

More info can be found in Sage 9 docs: https://github.com/roots/docs/tree/sage-9/sage

3 Likes
3

Hi @Eljas
I’m doing the same:
background-image: url(../images/backgrounds/footer-bg-1.jpg);
but doesn’t work, I get error

This relative module was not found:

* ./images/backgrounds/footer-bg-1.jpg in ./node_modules/cache-loader/dist/cjs.js!./node_modules/css-loader?{"sourceMap":true}!./node_modules/postcss-loader/lib?{ ...

Some help?