Roots Discourse

[Bud/Sage10/SCSS] Using images in a SASS file

Hello,

I’m trying to use Bud with Sass in its latest version and I’m having a little trouble calling my images in a SCSS file.

I have a file called header.scss with :

background: url(~@images/bg-header.png) var(--color-dark) no-repeat center top;

When I’m on the home page, everything is fine, I can see my image.

http://localhost:3000/assets/bg-header.png

But when I go to the /contact/ page, I see that the url of the image is not good:

http://localhost:3000/contact/assets/bg-header.png

Configuration

Sage 10
Bud next 20
SASS

Do you have an idea?

Thanks guys :slight_smile:

@aki thanks for trying bud! Sorry for the lateness of the reply, I’ve been super busy getting 5.1.0 out the door (which solves a few issues related to assets in css/scss files). Getting onto 5.1.0 is the next step for you.

One thing I’ve bumped into (even in 5.1.0) is that the ~@images alias doesn’t seem to play nicely with @roots/bud-sass. I don’t know yet whether that is solvable on our end or an incompatibility with upstream dependencies like sass-loader and postcss-scss. For now you’ll need to use relative paths like url('../../images/my-image.png')

1 Like

Hi, I’m having an issue using relative paths like url('../../images/my-image.png')

It only works using “bud build”. If I use “bud dev” it doesn’t work.

When I run “bud dev” it doesn’t create the app.css file on the /public folder. It uses the CSS in a tag.

It only works when I run “bud build” that creates the app.css file.

So when I run bud build command, I have this css on the page and it works perfectly:

background-image: url('http://domain.com/app/themes/theme_name/public/assets/my-image.a384e6.png.);

But when I run bud dev command, I have this on the page and it doesn’t work:

<style> background-image: url(http://domain.com/my-image.png) </style>

Can I do something to fix this?

Are you using .setPublicPath() in your config file?

It should be .setPublicPath('/app/themes/theme_name/public/')

I’ll check it out later to make sure everything is working properly with scss’s resolve-url loader, either way.

there is no css file generated in development. styles are applied with js so they can be hot reloaded.