0.7.2 introduced an ordering dependency between layout/hero and components/navbar

[mlippert]

This is about Bulma.

Overview of the problem

I'm using Bulma version [0.7.2]

Description

I just upgraded from 0.7.1 to 0.7.2 and the webpack build started failing.

ERROR in ./src/index.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    min-height: calc(100vh - #{$navbar-height})
                                              ^
      Undefined variable: "$navbar-height".
      in /myProjects/node_modules/bulma/sass/layout/hero.sass (line 113, column 48)

The imports in index.scss:

// Import only what you need from Bulma
@import "node_modules/bulma/sass/utilities/_all.sass";
@import "node_modules/bulma/sass/base/_all.sass";
@import "node_modules/bulma/sass/elements/button.sass";
@import "node_modules/bulma/sass/elements/container.sass";
@import "node_modules/bulma/sass/elements/form.sass";
@import "node_modules/bulma/sass/elements/title.sass";
@import "node_modules/bulma/sass/layout/hero.sass";
@import "node_modules/bulma/sass/layout/section.sass";
@import "node_modules/bulma/sass/components/navbar.sass";
@import "node_modules/bulma/sass/layout/_all.sass";
@import "node_modules/bulma/sass/components/_all.sass";
@import "node_modules/bulma/sass/elements/_all.sass";
@import "node_modules/bulma/sass/grid/tiles.sass";

@import "bulma/bulma.sass";
@import 'node_modules/bulma-timeline/dist/css/bulma-timeline.sass';

It seems there is an order dependency where there wasn't before because if I move the bulma/sass/components/navbar.sass import in front of the bulma/sass/layout/hero.sass import, it builds just fine.

I did try to look through the documentation to see if somewhere it stated that certain files must be imported before others, but the only mention I found said that bulma/sass/utilities/_all.sass must be imported first, but other than that I didn't see any mention of other ordering dependencies.

Steps to Reproduce

I think you just need to import the components/navbar.sass before layout/hero.sass.

Expected behavior

No build error

Actual behavior

A build error, see above.

[jgthms]

Indeed it is a new bug. It was introduced when closing another bug.

I’ll make a PR.

[DanielDewberry]

I came across this issue today, and fixed it by including
@import "node_modules/bulma/sass/components/navbar.sass"
at the top of node_modules/bulma/sass/layout/hero.sass.

For reference, I was following this example: https://bulma.io/documentation/customize/with-node-sass/ when I came across the issue.

npm: 3.5.2
bulma: 0.7.2