Sage 10 - Sass variable not converting on build

sage
,
1

Hello,

I have been using Sage themes since Sage 8 so thank you all for your hard work! I have been successful building some sites using @roots/sage version 5.8.7, but wanted to update to 6.12. I have everything working fine besides the sass variables are not converting on yarn build and on yarn dev. I know it has to be something little that I have wrong, but can’t seem to find it. I have gone through all the other posts of people with similar problems, but everything I change doesn’t help.

I have changed the theme from using tailwind to bootstrap and that seems to be working fine. Purgecss seems to be fine also since it strips out basically all of the bootstrap css.

I have a repo of the theme at GitHub - chrisecostanza/hill-hear-better so you can see what I have going on.

Please let me know if you need me to provide any other details. Thanks!

2

I think your problem is related to this @roots/bud-sass | bud.js.

What I’m not understanding though is why aliases still not work on your project. I tried it like this:

@import url('~@styles/_variables.scss');

/** Import theme styles */
@import url("~@styles/_bootstrap.scss");
@import url("~@styles/_global.scss");

but the result was still the same.
Anyway, if no other better answer/explanation is presented, you can do it like this in the bud.config.js:

  .tap(bud =>
    bud.sass.importGlobal([
      '@styles/variables',
      '@styles/global',
    ]))
// No need to add '@styles/bootstrap' since that is added to .entry({...})

In this way, the variables will work as they should when used in app.scss. Also this is taken from the documentation here https://bud.js.org/extensions/bud-sass#global-imports.

1 Like
3

Thank you very much! This is working now. I ended up putting the bootstrap import in with the importGlobal because it wouldn’t purge the css otherwise. Anyway here is what I have in my bud.config.js file and all is working. Thanks again!

.entry({
    app: ['@scripts/app', '@styles/app'],
    editor: ['@scripts/editor', '@styles/editor'],
})

.purgecss({
    content: [app.path(`resources/views/**`)],
    safelist: [...purgeCssWordPress.safelist],
})

.tap(bud =>
    bud.sass.importGlobal([
      '@styles/variables',
      '@styles/bootstrap',
      '@styles/global',
]))
2 Likes