如何避免 css 被 BootstrapVue 覆盖？

Question

BootstrapVue集成到我的Nuxt.js项目后，我原来的CSS样式被覆盖了。我需要组件，但如何删除它的 CSS 并保留我的组件？如果有人能分享一些相关经验，那将不胜感激！

Answer 1

将“!important”规则添加到您的 css 指令中。它将覆盖所有以前的指令。

示例：

<style>
    .theme--light.v-data-table {
        background-color: hsla(0, 0%, 100%, 0.16863) !important;
        color: rgba(0, 0, 0, 0.87) !important;
    }
</style>

Answer 2

在您的 nuxt.config.js 文件中试试这个

export default {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false // Or `bvCSS: false`
  }
}

如文档的这一部分所示：https://bootstrap-vue.org/docs（使用自定义 bootstrap SCSS 部分）

如何避免 css 被 BootstrapVue 覆盖？

How to avoid css overwriting from BootstrapVue?

nuxt.js

bootstrap-vue