Custom stylesheet in index.html not overriding Bootstrap 5 installed with NPM

Question

In my Vue 2 project I installed Bootstrap 5.3 using NPM, but my custom CSS stylesheet in the index.html code is not overriding Bootstrap's CSS.

I had no problems when getting Bootstrap via CDN. Also, my custom CSS added directly in the components are correctly overriding Bootstrap's CSS. It's just my global stylesheet in index.html that is being overridden.

My main.js looks like this:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'
import store from './store'
import VueI18n from 'vue-i18n'

Vue.use(Vuex)
Vue.use(VueI18n)

Vue.use(Bootstrap)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
    store: store, 
    router,
    i18n,
    beforeCreate() { this.$store.commit('initialiseStore');},
    render: h => h(App),
}).$mount('#app')

And my index.html looks like this:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <link rel="stylesheet" href="<%= BASE_URL %>media/css/layout.css?v2">
    <link rel="stylesheet" href="<%= BASE_URL %>media/css/mobile.css?v1">

I was able to make it work by removing my stylesheet reference from index.html and inserting the code below in the App.vue:

<style lang="scss">

@import '/media/css/layout.css';
@import '/media/css/mobile.css';

</style>

But I don't know if calling my custom stylesheet in App.vue is the correct way to do this. And should I still have to reference Bootstrap in index.html if it is installed by NPM? If yes, how can I do this if its folder is in node_modules?

Abdelrahman · Accepted Answer · 2023-05-06T20:39:53.947

1

You either use bootstrap through npm or use CDN, you don't have to do both. In either case, it's best to stick to one method throughout your app, for more info about the different ways to use bootstrap, take a look at the official documentation.

In either case, when importing or including bootstrap CDN, you should take care of CSS precedence and specificity rules. Import or include your most important stylesheets last, as follows:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<!-- your most important rules imported last -->
<link rel="stylesheet" href="/mycustom.css">

Or using imports as follows:

import 'bootstrap/dist/css/bootstrap.css';

/* your most important rules imported last */
import 'mycustomstyles.css';

If you use a hybrid approach .e.g. some styles are imports and others you include in the html, it depends on how the imports are added in the html page. For example, in react, styles imports are added at the end of the <head> element. So generally, they have higher priority than any css stylesheets links defined in the html page itself as they would be insered below it. Specifity is also important, inline styles and !important styles have high priority.

So, if a boostrap rule is listed !important, it will override your rule even if the stylesheet imported or included after it unless you use !important, too for same target element or use inline styles.

For more info about specifity, look at this answer

edited May 06 '23 at 20:39

answered May 06 '23 at 20:23

Abdelrahman

525
1
4
13

Hello Abdelrahman, thanks for replying. Everything was "visually" working fine when importing via CDN. But I got confused as I also have BootstrapVue installed and my custom stylesheets were being overridden when I ```import 'bootstrap/dist/css/bootstrap.css'``` was inserted in main.js as the BootstrapVue docs required and with Bootstrap CDN references removed from index.html. So I decided to import all through NPM to stick to only on method and I was able to make it work by setting my files as I described in my question. – GUIJS May 07 '23 at 15:43
But I still have 2 questions: 1) If I import my custom CSS through main.js (instead of App.vue as I'm doing now), should I place my files in the /src/assets folder instead of the /public folder? 2) Bootstrap official documents says that Sass compiler and Autoprefixer are required, but I haven't installed them. At what moment are they required? – GUIJS May 07 '23 at 15:43
1

@GUIJS You're welcome! For your first question, I'm not familiar with Vue.js myself, but I found an answer [here](https://stackoverflow.com/questions/67565180/where-to-keep-the-css-js-images-files-in-vue-project). It suggests keeping your css in `/src/assets` as public resources are static and won't go through webpack. – Abdelrahman May 08 '23 at 02:53
1

@GUIJS For your second question, you will need Sass compiler and autoprefixer if you compile your own extended version of bootstrap, you won't need them if you're using the already compiled bootstrap without the need to customize anything your own (just using bootstrap without modifying on them), look up this [answer](https://stackoverflow.com/a/34323807/7683436) and [the official documentation for customization](https://getbootstrap.com/docs/5.0/customize/overview/). Hope this helps! – Abdelrahman May 08 '23 at 02:54

Custom stylesheet in index.html not overriding Bootstrap 5 installed with NPM

1 Answers1