Vue2项目index.html自定义样式无法覆盖NPM安装的Bootstrap5

问题描述 #

在Vue 2项目中通过NPM安装Bootstrap 5.3后，index.html中引入的自定义全局CSS无法覆盖Bootstrap样式；此前使用CDN引入Bootstrap时无此问题，且组件内的自定义CSS能正常覆盖Bootstrap样式。

相关代码 #

main.js

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(I18n)

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')

原index.html样式引入

<!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">

临时解决方法

将index.html中的样式引用移除，在App.vue中通过@import引入：

<style lang="scss">
@import '/media/css/layout.css';
@import '/media/css/mobile.css';
</style>

疑问点：

• 在App.vue中引入自定义样式表是否为正确做法？
• NPM安装Bootstrap后，是否仍需在index.html中引用？若需要，如何引用node_modules中的Bootstrap文件？

解答 #

1. 为什么index.html的样式无法覆盖Bootstrap？ #

你在main.js中通过import引入的Bootstrap CSS，会被webpack打包到最终的项目CSS文件中，而Vue CLI默认会把这个打包后的CSS文件插入到index.html的<head>标签末尾。由于你手动在index.html中引入的自定义样式加载顺序早于打包后的Bootstrap样式，所以Bootstrap的样式优先级更高，会覆盖你的自定义样式。

2. 在App.vue中引入自定义样式是正确做法吗？ #

这是完全合规且推荐的全局样式引入方式：

• App.vue作为项目根组件，其未添加scoped属性的<style>标签会作用于整个应用，等同于全局样式表的效果。
• 这种方式下，webpack会按依赖顺序处理样式：main.js先加载Bootstrap CSS，App.vue的自定义样式后加载，因此自定义样式优先级更高，能正常覆盖Bootstrap样式。
• 如果你的样式使用了SCSS等预处理器语法，这种方式还能更好地集成项目的预编译配置。

3. NPM安装Bootstrap后，是否需要在index.html引用？ #

不需要。你已经通过main.js中的import 'bootstrap/dist/css/bootstrap.css'完成了Bootstrap CSS的引入，webpack会自动将其打包到项目中。若在index.html重复引用，会导致样式重复加载，可能引发不必要的冲突。

如果非要在index.html中引用（不推荐），可以通过绝对路径指向node_modules中的文件，但会绕开webpack的打包优化（如压缩、模块化处理），示例如下：

<link rel="stylesheet" href="<%= BASE_URL %>node_modules/bootstrap/dist/css/bootstrap.css">

内容的提问来源于stack exchange，提问作者GUIJS