built-in Badge component styles prevent using bootstrap badge styles

[rileytaylor]

Bug report

The built-in badge component causes issues if you use a .badge css class anywhere else in your application. In my current use case, I'm building a documentation site for our shops custom bootstrap theme. Because bootstrap has a built in .badge css class, suddenly all badges are the Vue green color (Which, you know, is a great color but definitely not what I want for demonstration examples).

Version

0.12

Steps to reproduce

Import bootstrap and try to use a badge component.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<span class="badge badge-secondary">Bootstrap Badge</span>

Bootstrap Badge Documentation for anyone unfamiliar

What happens:

What should happen:

What is expected?

I should be able to use the <Badge/> component without impeding upon using the bootstrap classes. Regardless of it being "just a bootstrap issue", .badge seems like a common enough css class to either avoid using or protect from disrupting things.

What is actually happening?

From a quick look, it seems that the <Badge/> component uses non-scoped styles, which is why it is affecting other .badge classes throughout the VuePress application. A potential solution would be to scope the styles to the component. Whether the styles are unscoped on purpose or not, I am unsure, nor could it be the best solution. Alternatively, a way to disable some of the built-in components would also be a solution. The Badge component is cool, but rolling my own or not using it would be more preferable in this instance than not being able to effectively document our bootstrap color scheme.

Other relevant information

• Your OS: macOS 10.13 High Sierra
• Node.js version: 8.9.4
• Browser version: Firefox 61
• Is this a global or local install? local
• Which package manager did you use for the install? npm (v5.6.0)

[ulivz]

Thanks for your reporting, for this issue, we indeed should make style of Badge scoped, and we don't prefer to add extra config for disabling built-in components (We don't want to be webpack, lol~), so just make the styles scoped, contribution welcome!