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!
-
Does this answer your question? Bootstrap-vue doesn't load CSSShashank Gb– Shashank Gb2021-09-15 04:53:36 +00:00Commented Sep 15, 2021 at 4: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– kissu2021-09-15 07:21:35 +00:00Commented Sep 15, 2021 at 7:21
Add a comment
|
2 Answers
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)
1 Comment
Capt. Michael
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!
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>
2 Comments
Capt. Michael
That means I need to put "!important" to all my CSS directives, but I prefer ways not to load BootstrapVue CSS, it this possible?
kissu
@MichaelCheng this is usually how you do override such frameworks, unfortunately. Hence why people don't like BS.