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

Moving of variables in 0.4 breaks webpack build #708

Closed
jeffijoe opened this issue Apr 25, 2017 · 18 comments
Closed

Moving of variables in 0.4 breaks webpack build #708

jeffijoe opened this issue Apr 25, 2017 · 18 comments
Assignees

Comments

@jeffijoe
Copy link

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

wateryoma commented May 4, 2017

same problem, but importing variables first actually worked for me

@jgthms
Copy link
Owner

jgthms commented May 5, 2017

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

@jgthms jgthms closed this as completed May 5, 2017
@samayo
Copy link

samayo commented May 9, 2017

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

jgthms commented May 9, 2017

Have you tried #708 (comment) ?

@gary149
Copy link

gary149 commented Jun 9, 2017

Getting this error too - is there a known solution ?

@jeffijoe
Copy link
Author

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

samayo commented Jun 13, 2017

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

@jeffijoe
Copy link
Author

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

jgthms commented Jun 13, 2017

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.

@jgthms jgthms reopened this Jun 13, 2017
@jgthms jgthms self-assigned this Jun 13, 2017
@jeffijoe
Copy link
Author

jeffijoe commented Jun 13, 2017

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

samayo commented Jun 13, 2017

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

@jeffijoe
Copy link
Author

jeffijoe commented Jun 13, 2017

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

samayo commented Jun 13, 2017

@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
Copy link
Author

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

@samayo
Copy link

samayo commented Jun 13, 2017

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

@jeffijoe
Copy link
Author

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

kiwicopple added a commit to kiwicopple/bulma that referenced this issue Jul 5, 2017
@kiwicopple
Copy link

I followed @jgthms's advice
kiwicopple@11a993e

seems to be working well on my webpack build now

@pi-ron
Copy link

pi-ron commented Aug 2, 2017

0.5.0 ...

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

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

7 participants