Bootstrap, Sage10 and assets

sage
, , ,
1

Hello everyone,
I am somewhat new to developing with Sage 10, I have been with version 8 for many years and a few days ago I decided to take the leap to this version so forgive me if my doubt is very basic.

I have my wordpress with my theme working, I followed the steps detailed here to replace tailwind with Bootstrap.

My problem comes that when I try to use images or fonts from the SCSS it doesn’t work, I have tried with

@font-face {
    font-family: 'AkzidenzGrotesk';
    src: url('~@fonts/AkzidenzGroteskBQ-Reg.woff2') format('woff2');
}

and

@font-face {
    font-family: 'AkzidenzGrotesk';
    src: url('@fonts/AkzidenzGroteskBQ-Reg.woff2') format('woff2');
}

And they only work on home, if I change to example.com/products, it stops loading.

As additional information I have tried with

app.setPublicPath('/app/themes/sage/public/');
and
app.setPublicPath('wp-content/themes/mytheme/public/')

and neither of them work.

What am I doing wrong?

2

What is the actual path to the public folder in your theme directory? That is the path you need to use

Is your theme name mytheme? Is your theme name sage? Are you using Bedrock? Are you using a normal WP structure?

There’s a note on the Sass docs about url, and you might also need to add the fonts directory to the bud config

It might be less painful to just simply use ../images/ and ../fonts/ in your stylesheets, but regardless, you will need to make sure that your public path is properly set.

3

Thanks for your quick reply, yes my actual path to the public folder is ‘wp-content/themes/ogo/public/’ (the theme name is ogo). I’m using a normal WP structure.

I have added the following line to bud.config.js

.assets(['images'])
 .assets(['fonts']);

But it still doesn’t work, as I said in the previous message, in the home everything works but in my web https://ogo.local/products the url of the font is https://ogo.local/products/wp-content/themes/ogo/public/fonts/AkzidenzGroteskBQ-Bold.woff2 and that’s why it doesn’t find it.

This happens on any page other than the home page. What am I doing wrong?

4

It sounds like you’re missing a trailing slash at the beginning of your public path

app.setPublicPath('/wp-content/themes/ogo/public/');
5

Absolutely! I couldn’t explain why it was so complicated, thanks for your patience Ben!

1 Like