如何避免开启tree shaking的Vuetify覆盖Bootstrap3的原有样式？

你遇到的样式冲突是因为vuetify-loader按需引入组件时，会自动注入Vuetify的全局基础样式、网格系统样式，其中就包含.row、.container等和Bootstrap3重名的类，即使你没有手动引入全量vuetify.min.css，这部分样式也会被自动注入到打包产物中。

• 方案1：关闭Vuetify内置的网格系统（最适配你的场景）
  你仅用到了表单类组件，不需要Vuetify的布局能力，直接在Vuetify初始化配置中关闭网格样式注入即可，修改你的vuetify.js代码：

const opts = {
  grid: false, // 关闭网格系统，不会再注入.row/.col/.container等布局类
  reset: false, // 可选：如果不需要Vuetify的全局样式重置也可以关闭，避免影响全局元素默认样式
};

修改后重新打包，Vuetify就不会再输出和Bootstrap冲突的布局类样式。

• 方案2：给Vuetify实例添加专属样式命名空间
  如果后续还要用到Vuetify的布局能力，可以给导航栏的Vue实例根节点添加唯一的专属类名，再通过Vuetify的Sass变量配置，让所有Vuetify样式都只作用在这个命名空间下：

1. 给挂载节点加专属类：

// 给你的导航栏根节点加专属类
navbarAppRootEl.classList.add('vuetify-navbar-root');

2. 在项目的全局Sass变量文件中配置：

$vuetify-root-class: 'vuetify-navbar-root';

3. 确保vue.config.js中配置了Vuetify的自定义样式变量加载：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/你的变量文件路径.scss";`
      }
    }
  },
  transpileDependencies: ['vuetify']
}

配置后所有Vuetify生成的样式都会带上.vuetify-navbar-root前缀，只会作用在导航栏内部，不会污染全局Bootstrap样式。

• 方案3：临时快速修复（仅适用于少量类冲突场景）
  如果暂时不想改配置，可以调整全局样式加载顺序，把Bootstrap3的样式文件引入放在Vuetify样式引入的后面，同权重的同名类后面加载的优先级更高，Bootstrap的样式会覆盖Vuetify的冲突样式。也可以全局强制重写冲突类的样式：

/* 强制全局.row使用Bootstrap的样式 */
.row:not([class*="v-"]) {
  margin-left: -15px !important;
  margin-right: -15px !important;
  /* 其他Bootstrap .row的原有属性 */
}

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