Search code examples
cssvue.jsvuejs3bulmavue-cli-3

Why is bulma overriding my vue3 component css?

I'm using bulma with a vue cli 3 project, and I've included the bulma import as follows under index.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma';

Then I have css specified in the style tag of my individual components. When I load the page, I can see the bulma's css is the last one on the list of style tags, as follows

<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 all my css can be overriden by bulma's if their classes are more specific. Ideally I'd want my components' css to take precedence and I would normally do that by placing bulma's css higher in the list of style tags.

Since the style tags are being injected by webpack's build process, I don't know how to influence this.

Is this the default behaviour and if so, how can I override bulma's css without making my rules more specific (with ids for example) or without having to explicitly override the bulma css with sass.

Solution

  • I was able to resolve this by moving the bulma import to the top of main.js and also changing it from require to import, as follows

    Before

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma';

    Now

    import '@/assets/main.scss';
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'