CODEWITHSUNDEEP
vue.jsbootstrap-4vue-componentvue-routerbootstrap-vue
Paul Murray
Paul Murray

Reputation: 429

Bootstrap Styles Taking Precedence Over Custom CSS

I have a Vue-2 project that uses (of what should be relevant) Vue-Router, Webpack, and Bootstrap-Vue. I load in Bootstrap at the root of my application since it's used globally on my app. Within the app, I divide my views into internal and external routes with sub-routes for the individual pages. All my external routes share some common css styling so I load in 'external.css' at the base of my external routes to avoid redefining the same css in each component.

The problem I'm having is that Bootstrap's css rules are taking priority over my custom css rules when I pull styles from 'external.css', but not when the classes are defined locally in each component. It's not an issue of scoped styling because the rules are being applied to the components, just earlier in the hierarchy so they get overwritten by Bootstrap's rules.

My understanding is that since my 'external.css' file is included further down in the application's hierarchy, its styles should be applied second (as if I were using html imports and Bootstrap-Vue were above external.css) but but intuition about how webpack handles imports might be off.

Here's the relevant code in my base file (main.js):

import Vue from "vue";
import App from "./App";

import BootstrapVue from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
});

And in my External.vue component:

<script>
export default {
  name: "External"
};
</script>

<style>
@import "../../assets/css/external_styles.css";
</style>

Upvotes: 3

Views: 1987

Answers (2)

Paul Murray
Paul Murray

Reputation: 429

I solved this months ago but figured people might want to know the answer:

I was including Bootstrap's CSS after I was loading my component that included my router (which included my external route that loads my custom styles). Simply moving the import/use statement for my router below the one for Bootstrap solved the issue.

Upvotes: 6

Troy Morehouse
Troy Morehouse

Reputation: 5435

Ensure your custom CSS has the right specificity to target the elements.

Upvotes: 0

Related Questions