In my Vue CLI 3 project, I'm utilizing Bulma and have included the import in the 'index.js' file like so:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma';
After that, I have specified CSS within the style tag of each individual component. Upon loading the page, I noticed that Bulma's CSS is the last one in the list of style tags:
<style type="text/css">
.componentSpecificClass{
color:white;
}
</style>
<style type="text/css">/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */
.button, .input, .textarea, .select select, .file-cta,
...
</style>
This means that Bulma's CSS can override mine if their classes are more specific. Ideally, I would like my components' CSS to have priority, but I am unsure how to influence the order of the style tags since they are injected by webpack's build process.
Is this default behavior? If so, how can I override Bulma's CSS without making my rules more specific (using IDs, for example) or without explicitly overriding Bulma's CSS with Sass?