Bulma: Meteor Usage Issue

[bduff9]

Hi there! I'm honestly not sure if this should go here or somewhere else so let me know if I'm in the wrong spot. :) I have bulma installed in my meteor app with "meteor npm i --save bulma". I then try to import the bulma.sass file after some variables so everything gets brought into my app, however fourseven throws an error preventing the app from starting:

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/main.scss: Scss compiler error: Invalid CSS after "@charset":
   expected 1 selector or at-rule, was '"utf-8"'

If I comment out the @charset line in bulma.sass, it then throws another error:

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/main.scss: Scss compiler error: media query expression must begin
   with '('

I'm not sure where this is coming from, so I don't know how to proceed. I'm sure this has something to do with fourseven, but they seem to be relatively unhelpful thus far. Hoping you have some thoughts on this. Thanks!

[jgthms]

Bulma is written in .sass and it seems your compiler tries read as .scss instead?

[bduff9]

According to their docs, they support .sass files as well as .scss. I don't see any .scss files in bulma, do you not have that available?

[jgthms]

It's weird that it says media query expression must begin with '(' because @media screen is valid CSS.

You might need to choose another compiler.

[bduff9]

Hi there! Thanks for your reply, however I am not aware of another compiler that will work for my needs with Meteor. That being said, it looks like over at fourseven, they have found this as a node-sass issue:
https://github.com/fourseven/meteor-scss/issues/120

It looks like there is currently a libsass problem with .sass files. So, are there any plans to post an scss version of your files? If you want, I can submit a PR with the version that seems to be working after running sass-convert, which converted all your .sass to .scss. However, whether you create it or accept my changes, I do need scss versions (or libsass to be fixed) in order to use Bulma as when I deploy to a docker container, I cannot process the node_modules into scss at that time. Thanks!

[chasegiunta]

@jgthms not sure how much of a pain it might be to also provide a .scss versions in the repo, but I (and probably many others) would also appreciate it! SCSS is apparently the most commonly used syntax between the two.

[bduff9]

@jgthms Haven't heard anything regarding this issue in a while, do you have any thoughts? If you are not interested in an scss version, I am happy to host it for those who might be interested. It would, of course, give you credit and link back to your docs. Let me know as I think it could be useful. Thanks!

[bduff9]

I haven't heard back and I need this for a project so I went ahead and made the package with links back here. If someone else needs scss files in the meantime, you can use:
npm install bulma_scss OR meteor add bduff9:bulma

This is mainly for my personal use so no guarantee about these packages, and if you do have any issue with my doing this, I will be happy to remove it. Thanks!

[thebiltheory]

@bduff9 You're the boss for providing scss files! I ran in into the same issue today and couldn't find any workaround.

Apparently, the .sass syntax is a deprecated syntax and will be removed soon if I am not mistaken?

Deprecated Syntax ( Bottom of the page )

I am wondering if an (official) scss version of Bulma is on the roadmap.

Cheers!

[ediopia]

@thebiltheory Yes. totally agreed. Meteor can not import sass with intended syntax.

[jgthms]

Bulma will remain in .sass, as the compiler should be able to handle both .sass and .scss files.

Feel free to create or use a SCSS fork like https://github.com/bduff9/bulma_scss but the problem here is with Meteor.