In my VUE project with Vuetify, I'm going to use the Bootstrap library.
It turns out that when I import the Bootstrap library, the text font and even the icon, the route has an underline. When I only worked with Vuetify, I didn't have this problem.
import "bootstrap/dist/css/bootstrap.css";
When I comment out the line in the project that imports the library, the underline disappears.
How can I solve this without having to put classes in every route in the project?
"vue": "2.6.14",
"bootstrap": "4.6.1",
"bootstrap-vue": "2.21.2",
"vuetify": "2.6.0",
Fixed my problem. Bootstrap underlines link routes by default. So I analyzed the file that is imported into the VUE project, and found several settings that underline links when the mouse pointer lands on them.
The file I analyzed is:
"bootstrap-vue/dist/bootstrap-vue.css";
So, I created a file where to put the CSS configs that I want to change BootstrapVue's default.
//bootstrapGlobal.css
a:not(.btn) {
text-decoration: none;
}
I only needed to change this config, but if I need to change others I'll insert it in this global file.
This tip is for those who need it.
Happy ending!