Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Best Practices for Bulma support? #17

Closed
AleMunin opened this issue Nov 24, 2022 · 2 comments
Closed

Best Practices for Bulma support? #17

AleMunin opened this issue Nov 24, 2022 · 2 comments

Comments

@AleMunin
Copy link

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
Copy link
Owner

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
Copy link
Owner

kentaroi commented Nov 30, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants