如何避免Nuxt.js项目中BootstrapVue覆盖原有CSS样式？

方案1：通过Nuxt模块配置关闭全局CSS引入（最便捷） #

如果你是通过@nuxtjs/bootstrap-vue模块集成的BootstrapVue，直接修改项目根目录的配置文件即可完全禁用自带CSS加载，组件功能不受影响：

• 打开nuxt.config.js（Nuxt3对应nuxt.config.ts）
• 在bootstrapVue配置项中添加以下参数：

export default {
  modules: [
    '@nuxtjs/bootstrap-vue'
  ],
  bootstrapVue: {
    // 关闭Bootstrap核心CSS
    bootstrapCSS: false,
    // 关闭BootstrapVue专属CSS
    bootstrapVueCSS: false,
    // 整体关闭所有模块自动注入的CSS
    css: false
  }
}

方案2：手动按需引入组件，不加载样式文件 #

如果是手动集成BootstrapVue而非使用官方Nuxt模块，只要不引入对应的CSS资源即可：

• 删除代码中所有引入Bootstrap、BootstrapVue CSS的语句，比如：

  // 删掉以下两行
  // import 'bootstrap/dist/css/bootstrap.css'
  // import 'bootstrap-vue/dist/bootstrap-vue.css'
  

• 仅引入需要用到的组件注册即可，示例：

// plugins/bootstrap-vue.js
import Vue from 'vue'
import { BButton, BModal, BForm } from 'bootstrap-vue'

// 注册需要的组件，JS交互逻辑完全保留
Vue.component('BButton', BButton)
Vue.component('BModal', BModal)
Vue.component('BForm', BForm)

在nuxt.config.js中注册该插件即可正常使用组件，不会加载任何默认样式。

方案3：保留部分默认样式，避免自定义样式被覆盖 #

如果你还需要用到Bootstrap的部分基础样式，不想完全关闭默认CSS，可以通过调整优先级解决覆盖问题：

• 自定义全局CSS在nuxt.config.js的css配置项中放在最后，加载顺序越晚优先级越高
• 单文件组件的<style>标签添加scoped属性，局部样式优先级高于全局样式；需要覆盖组件内部样式时使用深度选择器::v-deep（Vue2）或:deep()（Vue3）
• 自定义样式的选择器权重高于Bootstrap默认选择器，必要时可加!important应急使用

注意事项 #

• 关闭默认CSS后，Bootstrap的通用工具类（比如mt-3、d-flex）也会同步失效，如果你需要使用工具类，可以单独引入Bootstrap的工具类CSS文件，无需引入全部组件样式
• 少数组件的交互逻辑依赖少量内置CSS（比如弹窗的显隐动画），如果出现功能异常，可以把对应组件的必要CSS单独复制到自定义样式文件中即可。

内容的提问来源于stack exchange，提问作者Capt. Michael