How to avoid css overwriting from BootstrapVue?

Question

After BootstrapVue was integrated into my Nuxt.js project, my original CSS styles were overwritten. I need components, but how could I remove its CSS and keep mine? If anyone could share some relative experience, that would be very appreciated!

Answer 1

Try this in your nuxt.config.js file

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

As shown in this part of the documentation: https://bootstrap-vue.org/docs (using custom bootstrap SCSS section)