[Vuejs]-Vue Webpack Build Breaks Bulma CSS

by

0👍

I was facing the same issue as yours. After some debugging, I realize that this is due to the order of css rules. It seems that the built css file doesn’t have the same rules order as the dev server.

I searched a little bit on this topic. On the webpack documentation I have found this:

Keep in mind that it’s difficult to manage the execution order of modules, so design your stylesheets so that order doesn’t matter. (You can, however, rely on the order within a given CSS file.)

I solved my problem by increasing the specificity of my custom css selectors by using #id instead of .class.

ex:

// my custom css rules
#navbar a {
  color: white
}

instead of:

// my custom css rules
.navbar a {
  color: white
}

Thus the order of your custom rules versus the bulma ones won’t matter because the priority will be always for the id over the class selector.

I hope this is useful

👤Abdelaziz Mokhnache

Leave a comment