Webpack: CSS component styles being overwritten by Bootstrap styles in build, not in dev

[jlucrob]

Hello!

I'm using Bootstrap for a simple vue js project. I have a problem where when Im testing on the dev server (npm run dev) most of the styles I write in my components overwrite the Bootstrap styles, like I would expect. But then, when I run npm run build and publish my site to github pages, some of the Bootstrap styles are now suddenly overwriting my component specific styles.
Anyone has an idea why this happens? Any clues on how to fix this.

To use Bootstrap in my project, I installed it with npm install bootstrap. Then I imported it in my main.js like this:
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

The page Im talking about is this one: https://jlucrob.github.io/
And the built project is here: https://github.com/jlucrob/jlucrob.github.io

Any help would be appreciated. Thanks a lot!

[jlucrob]

Adding !important works of course. But having to do that for every style is somewhat annoying...

[LinusBorg]

Well, just sharing The built files doesn't allow us to say anything specific about how to solve this for you

The issue is generally known, and has to do with vue-loader injecting styles lazily in development (when used with style loader)

There's long ongoing discussions a bout this in the vue-loader repository.

Independent of that its probably a bad idea to rely on css occurrence order for overwriting styles in components in general.

I would guess you are importing bootstrap too late in your main.js or something.

[jlucrob]

I would guess you are importing bootstrap too late in your main.js or something

That was it ahah! Easy fix. I'm new to VueJS. That didn't come to mind when I was trying to find the issue. It's weird that it was working while running in dev though...
Thanks for your help!

I was doing:
import Vue from 'vue'
import App from './App'
import router from './router'
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

Doing it this way fixed it:
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
import Vue from 'vue'
import App from './App'
import router from './router'