Bulma: Tabs sass file throwing error with !important

[tylerbodway]

This is about the Bulma CSS framework
I'm using Bulma version [0.5.0]
My browser is: Chrome 59
I am using sass-rails version [5.0]

I am having compilation issues when trying to put together a custom build of Bulma inside my Rails project. I am pulling Bulma into my node_modules from Yarn. Then just creating a build file /app/assets/stylesheets/global/framework.scss that I include into my sprockets. The only import that is giving me trouble is the tabs component.

Here is my build file:

// Utilities
@import "bulma/sass/utilities/functions.sass";
@import "bulma/sass/utilities/initial-variables.sass";
@import "bulma/sass/utilities/derived-variables.sass";
@import "bulma/sass/utilities/mixins.sass";
@import "bulma/sass/utilities/animations.sass";
@import "bulma/sass/utilities/controls.sass";

// Base
@import "bulma/sass/base/minireset.sass";
@import "bulma/sass/base/generic.sass";
@import "bulma/sass/base/helpers.sass";

// Elements
@import "bulma/sass/elements/box.sass";
@import "bulma/sass/elements/button.sass";
@import "bulma/sass/elements/content.sass";
@import "bulma/sass/elements/form.sass";
@import "bulma/sass/elements/icon.sass";
@import "bulma/sass/elements/image.sass";
@import "bulma/sass/elements/notification.sass";
@import "bulma/sass/elements/progress.sass";
@import "bulma/sass/elements/table.sass";
@import "bulma/sass/elements/tag.sass";
@import "bulma/sass/elements/title.sass";
@import "bulma/sass/elements/other.sass";

// Components
@import "bulma/sass/components/breadcrumb.sass";
@import "bulma/sass/components/card.sass";
@import "bulma/sass/components/dropdown.sass";
@import "bulma/sass/components/level.sass";
@import "bulma/sass/components/media.sass";
@import "bulma/sass/components/menu.sass";
@import "bulma/sass/components/message.sass";
@import "bulma/sass/components/modal.sass";
@import "bulma/sass/components/nav.sass";
@import "bulma/sass/components/navbar.sass";
@import "bulma/sass/components/pagination.sass";
@import "bulma/sass/components/panel.sass";
@import "bulma/sass/components/tabs.sass"; // THROWING ERROR

// Grid
@import "bulma/sass/grid/columns.sass";
@import "bulma/sass/grid/tiles.sass";

// Layout
@import "bulma/sass/layout/hero.sass";
@import "bulma/sass/layout/section.sass";
@import "bulma/sass/layout/footer.sass";

When I place that file into my sprockets, I'm met with the error Invalid flag "!important"..
Looking at the source tabs file on line 17, it seems to be the only one with an !important and !default flag.

No other component file has the !important flag so I'm assuming that's the issue. When I remove the !important, the error goes away.

[jgthms]

Oh interesting. Let me fix that.

[ivangreene]

Is this fix in the npm package yet?

[jgthms]

Not yet. It'll be in 0.5.1.

[ankitrg]

When is this version going to come?
How can I make it work currently?

[tylerbodway]

@ankitrg you can make it work currently by pointing your package.json to Github instead of NPM

"dependencies": {
  "bulma": "jgthms/bulma"
}

As far as when it will be available on NPM, that'll need an answer from @jgthms