Bulma import order in sass, missing elements

user_12794454 0
Viewed 162

I imported the bulma elements I want like this

@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/title.sass";
@import "../../node_modules/bulma/sass/form/_all.sass";
@import "../../node_modules/bulma/sass/components/navbar.sass";
@import "../../node_modules/bulma/sass/layout/hero.sass";
@import "../../node_modules/bulma/sass/layout/section.sass";
@import "../../node_modules/bulma/sass/grid/columns.sass";
@import "../../node_modules/bulma/sass/components/card.sass";
@import "../../node_modules/bulma/sass/components/modal.sass";
@import "../../node_modules/bulma/sass/elements/icon.sass";

Everything works fine except the display of the cross to close a modal.

I tested to import all Bulma with bulma.sass and the cross is displayed well. On closer inspection, it seems that it is extend.sass that is missing, but I do import @import "../../node_modules/bulma/sass/utilities/_all.sass"; which normally contains extends. And even adding extends individually doesn't work.

I tried to change the order of my imports but it involves problems like modals not working anymore.

I didn't see any recommended order in the import in the Bulma documentation. I use node-sass for the compilation.

Do you have any ideas, I'm doing it wrong? Thanks

bulma node-sass sass import css
1 Answers

I've just encountered this same issue and finally found out that the other required element to display that "close" cross is the: /bulma/sass/elements/other

If you add a line to import it like:

@import '../../node_modules/bulma/sass/elements/other';

You should get the cross in the message.

user_183481460
Related