Bulma: Moving of variables in 0.4 breaks webpack build

[jeffijoe]

Overview of the problem

This is about the Bulma CSS framework
This is a Sass issue
I am sure this issue is not a duplicate

Description

In 0.4, the responsiveness variables were moved out of mixins.sass and into variables.sass. This breaks my code where I rely on mixins in my own code.

I tried doing

@import '~bulma/sass/utilities/variables'
@import '~bulma/sass/utilities/mixins'

But that didn't work either. Error:

  @media screen and (max-width: $tablet - 1px)
                               ^
      Undefined variable: "$tablet".
      in ~/my-project/node_modules/bulma/sass/utilities/mixins.sass (line 174, column 33)

Steps to Reproduce

1. Set up a Webpack build
2. Import mixins.sass
3. Use a responsive mixin, like +tablet

I think if you just add an @import 'variables' to mixins.sass we should be good.

This is preventing me from uprading to 0.4.

[wateryoma]

same problem, but importing variables first actually worked for me

[jgthms]

Mmmh I'm not sure why it fails. One solution would be to put the variables in mixins.sass instead.

[samayo]

I'm still getting this error. It's very frustrating tbh. I was going to rant as to why people ship broken software, but I realized bulma is still at 0.4.

Nonetheless, I hope someone can fix this. I've been stuck on this on and off for months

[jgthms]

Have you tried https://github.com/jgthms/bulma/issues/708#issuecomment-299429624 ?

[gary149]

Getting this error too - is there a known solution ?

[jeffijoe]

@jgthms

One solution would be to put the variables in mixins.sass instead.

So you want us to modify mixins.sass in our own copy?

[samayo]

@jeffijoe That's what I did to resolve the issue. It's a sad state of affairs.

[jeffijoe]

@samayo that's not a viable solution at all; our Docker builds fetches fresh packages every time. I don't understand why this issue was marked closed?

[jgthms]

So variables.sass should be imported before mixins.sass. If that fails too, it means the Webpack loader is not respecting the order specified.

I can duplicate the variables in mixins as well, or move them to mixins.

I'll reopen.

[jeffijoe]

I'm doing:

@import '../../sass/variables' // this imports the bulma vars
@import '~bulma/sass/utilities/mixins'

And I still get

Module build failed:
  @media screen and (max-width: $tablet - 1px)
                               ^
      Undefined variable: "$tablet".
      in /Users/jeff/my-project/node_modules/bulma/sass/utilities/mixins.sass (line 180, column 33)
 @ ./src/components/Modal/styles.sass 4:14-231 18:2-22:4 19:20-237

[samayo]

This means, mixins are not imported. Make sure you are importing. I would prefer using ../../sass/mixins instead of the tiled character.

[jeffijoe]

@samayo my consuming sass file is nested deeply, when reaching into node modules I always use the tilde char.

My variables.sass is my own variables that imports bulmas as well.

[samayo]

@jeffijoe I think I made a mistake. It seems the sass/variables that is no properly imported. I had the same issue and that's how I fixed it. Or try with another tagged release, this fixes the issue 90% of the time.

[jeffijoe]

@samayo so what exactly did you do to fix the issue long-term?

[samayo]

Only the tag messed up the issue. I fixed the long-term problem by using another release

[jeffijoe]

@samayo yeah I am using 0.3.2 because 0.4.x causes this issue.

[kiwicopple]

I followed @jgthms's advice
https://github.com/kiwicopple/bulma/commit/11a993e67ffb599475ce7b1f56dc5f6e1a56f82a

seems to be working well on my webpack build now

[pi-ron]

0.5.0 ...

+1 I followed @jgthms's advice
kiwicopple/bulma@11a993e