Import global Sass modules with @use

bud
1

I am using the latest Bud.js (6.24.0) with the bud-sass extension for Sass support. My project compiles successfully, however, I’m doing a bit of refactoring and looking for a way to include some variables globally, without having to explicitly add them across many scss partials.

I first tried using the built-in importGlobal function in my bud.config like so

export default async (app) => {
  app
    // ...buncha stuff
    .tap((app) => app.sass.importGlobal('@styles/globals'))
    // more stuff
};

However, this isn’t working - the compiler sticks on the first “Undefined variable.” that should have been made available globally. I wondered if perhaps this method wasn’t working because importGlobal is designed to use @import, whereas my project is using the newer @use module syntax.

To get around this I tried a different approach, using the setOption method like so

export default async (app) => {
  app
    // ...buncha stuff
    .tap((app) =>
      app.sass.setOption('additionalData', `@use "@styles/globals" as *;`)
    )
    // more stuff
};

But this fails as well (still getting “Undefined variable”).

My global style.scss

/**
 * Sass Methods
 */
@use 'sass:math';

// @use 'globals' as *;

@use 'tools/tool';

My project structure

├── bud.config.mjs
├── src/
│   ├── scss/
│   │   ├── style.scss
│   │   ├── _globals.scss
│   │   ├── tools/
│   │   │   ├── _tool.scss

UPDATE: Just as a sanity check, when I explicitly import the _globals.scss at the top of my _tool.scss, the variables are available.

/* tools/_tool.scss */
@use '~@src/scss/globals' as *;

p {
  height: $unit-large; // this works
}

Just wondering what is the proper way to make a Sass module globally available with Bud when using @use?