In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS.
Interestingly, I faced no problems when using Bootstrap from a CDN. Additionally, directly adding custom CSS within components successfully overrides Bootstrap's styles. It seems that only the global stylesheet in index.html is being overridden.
My main.js setup includes:
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')
As for my index.html structure:
<!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">
To resolve the issue, I removed the stylesheet reference from index.html and included the following code in App.vue instead:
<style lang="scss">
@import '/media/css/layout.css';
@import '/media/css/mobile.css';
</style>
I am uncertain whether calling the custom stylesheet in App.vue is the recommended approach. Moreover, I am unsure if referencing Bootstrap in index.html is still necessary when it is installed via NPM. If so, how can I correctly reference Bootstrap from the node_modules folder?