Problem with Undefined Variable

[chobo2]

I try to do in my reactjs/webpack project

import "../../node_modules/bulma/bulma.sass";
import "../../node_modules/bulma-steps/dist/bulma-steps.sass";

I get: Undefined variable: "$grey-light".

[Wikiki]

Hi,

it seems you have an issu with bulma import. $grey-light is a variable defined by bulma itself.

[chobo2]

hmm yea that is what I thought but I am importing everything in. So I am not sure why it is not happening.

[Wikiki]

can you access to any other bulma variables within your source (without importing my extension) ?

[chobo2]

I am not sure. I am importing bulma into my component not through another sass file.

[Wikiki]

can you then try to create a custom sass file using a bulma's variable and import it before the extension to check ?

[chobo2]

Yea if I create a custom sass file and put both the bulmas sass files in it works perfectly fine. I guess it can't work with components and webpack.

Not a game stopper for me but wonder why it does not work.

on a side note, what is the difference between is-success vs is-completed

[Wikiki]

is-success is the bulma color modifier. That's why I use is-completed to manage completed tasks

[chobo2]

when you say is-completed is to manage completed tasks. Do you mean it has no effect on styling but is used for the javascript?

I am bit confused if is-active, is-completed change the styling.

[Wikiki]

is-active is to style the current active step. is-completed is to style a finished steps. and finallt is-success is just as is-danger, is-warning,....it's just to force the default step color

[Wikiki]

is-completed is used both by sass and JavaScript