0

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!

kissu
  • 40,416
  • 14
  • 65
  • 133
Capt. Michael
  • 103
  • 2
  • 11
  • Does this answer your question? [Bootstrap-vue doesn't load CSS](https://stackoverflow.com/questions/49371467/bootstrap-vue-doesnt-load-css) – Shashank Gb Sep 15 '21 at 04:53
  • If you don't want the CSS of Bootstrap, you should probably not even use it in the first place but another framework or just a components library I guess. – kissu Sep 15 '21 at 07:21

2 Answers2

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)

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thanks @kissu, that's correct! I tried this way before, but I mistakenly put this code into another project which is very familiar with the one I'm working on, so I just thought it may not be the solution I expect, and it works after I put it in the right place. What a stupid mistake! – Capt. Michael Sep 15 '21 at 08:29
0

Add "!important" rule to your css directives. It will override all previous directives.

Example:

<style>
    .theme--light.v-data-table {
        background-color: hsla(0, 0%, 100%, 0.16863) !important;
        color: rgba(0, 0, 0, 0.87) !important;
    }
</style>
mokumus
  • 185
  • 1
  • 11
  • That means I need to put "!important" to all my CSS directives, but I prefer ways not to load BootstrapVue CSS, it this possible? – Capt. Michael Sep 15 '21 at 06:54
  • @MichaelCheng this is usually how you do override such frameworks, unfortunately. Hence why people don't like BS. – kissu Sep 15 '21 at 07:24