Best Practices for Bulma support?

[AleMunin]

I dragged bulma folder (with the sass files) to src folder, figuring it would just run.

I was hoping the sass on the folder would run smoothly but I get a build error regarding sass.

Warning: The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead.
    src/sass/bulma/sass/base/helpers.sass 1:1  root stylesheet

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering sass template ./src/sass/bulma/sass/components/breadcrumb.sass (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./src/sass/bulma/sass/components/breadcrumb.sass (via TemplateContentCompileError)
[11ty] 3. The target selector was not found.
[11ty] Use "@extend %block !optional" to avoid this error.
[11ty]    ╷
[11ty] 13 │   @extend %block
[11ty]    │   ^^^^^^^^^^^^^^
[11ty]    ╵
[11ty]   src/sass/bulma/sass/components/breadcrumb.sass 13:3  root stylesheet (via Error)
[11ty] 
[11ty] Original error stack trace: Error: The target selector was not found.
[11ty] Use "@extend %block !optional" to avoid this error.
[11ty]    ╷
[11ty] 13 │   @extend %block
[11ty]    │   ^^^^^^^^^^^^^^
[11ty]    ╵

I am not sure if this is coming from the eleventy-sass plugin directly or something else (sorry, i'm quite new at this).

What would be the best way to go around it in your opinion?

[kentaroi]

I didn't dig deep and might be wrong, but

Sass has two implementations, node-sass and dart-sass. Current Sass implementation is dart-sass, which eleventy-sass depends on. However, bulma seems to expect users to use node-sass, which is deprecated.

Therefore, I would think this is not an issue of eleventy-sass. (BTW, I found a similar issue at bulma repo.)

There might be some workarounds or tricks to work bulma with dart-sass, but I'm not sure about that.

My suggestions are as follows:

• Search a plugin that supports node-sass
• Use an older version of Eleventy (perhaps 0.x) with the former de facto standard eleventy-plugin-sass
• Move on to another CSS framework

If there are lots of requests for supporting node-sass, I'd like to think about it, but currently I am sorry that I am reluctant to support a deprecated library.

[kentaroi]

I've noticed that I didn't answer your question. I'm sorry, @AleMunin . If I were you and wanted to use eleventy-sass with bulma, I would follow the instructions of the warning and error messages that you pasted the above. First of all, I would follow the warning message: import sass/helpers/_all instead of importing base/helpers.

If the error still exists after the above fix, I will follow the instruction of the error message: Replace the line https://github.com/jgthms/bulma/blob/bd2e065ab7fe99aafab8bfa14fe608c2d2c282b4/sass/components/breadcrumb.sass#L13 with the following:

@extend %block !optional