How to best use third-party sass libraries?

[JeanMertz]

I wanted to use Bulma on my page, so I downloaded the sass files and put them in the right place in the sass folder. However, I kept running into "undefined variables" errors. Eventually I figured out that while the "import all" files where named _all.sass, the sub-files didn't have underscores prefixed, so they would get compiled standalone by Gutenberg.

The solution was to rename all files to have an underscore.

Is there a better way to tackle this? For example, by letting Gutenberg know not to compile a specific directory in the sass directory, to allow those files to imported by some other file, but otherwise be ignored?

[Keats]

That's simply the way Sass work: all files starting with an underscore will not be compiled and are meant to be imported, all the other files are meant to be compiled to their own .css files. I think in that case it's the bulma repo that is a bit weird and rely on compiling a single file via node-sass despite having so many files without _. It usually looks more like https://github.com/zurb/foundation-sites/tree/develop/scss in which case you have no issues with Gutenberg.

For example, by letting Gutenberg know not to compile a specific directory in the sass directory, to allow those files to imported by some other file, but otherwise be ignored?

That would require making changes to libsass which is definitely out of scope and would probably be rejected anyway. I don't think there's anything Gutenberg can do to help in that case :/

[JeanMertz]

it's the bulma repo that is a bit weird and rely on compiling a single file via node-sass despite having so many files without _.

Ah yes, you are right.

I don't think there's anything Gutenberg can do to help in that case :/

You are right. The solution I've applied seems to be the correct one. I might report this to Bulma, but this is indeed not an issue with Gutenberg (awesome tool, by the way!).

[batisteo]

The solution I've applied seems to be the correct one

Which one?

At the moment I put it in the static folder, and import with ../static/bulma/~.

[JeanMertz]

@batisteo, see my initial post:

The solution was to rename all files to have an underscore.

[zimmi]

If this sass feature is implemented, it would solve this issue nicely, I think: Just prefix the root folder of the CSS / Sass Framework with an underscore and @import all the pieces you need.

[suterma]

To, me this indeed seems to be an issue, although maybe not a bug per se, with Bulma. I am proposing a simple workaround here, in the issue mentioned above: https://github.com/jgthms/bulma/issues/3675#issuecomment-2010431626

This workaround would work with any third-party sass library that does not conform to zola/grass's expectations about the naming scheme with the underscores.