search

vuejs / vuepress

📝 Minimalistic Vue-powered static site generator
https://vuepress.vuejs.org
MIT License
22.57k stars 4.76k forks source link

Css conflict #854

Open IgorDePaula opened 6 years ago

IgorDePaula commented 6 years ago

Bug report

Version

VuePress 0.14.2

Steps to reproduce

I put the AdminLite.io template in vue components, but this template use bootstrap. On doc this vue components with VuePress, the css from VuePress enter in conflict with bootstrap css.

https://igordepaula.github.io/AdminLTEVue/

What is expected?

Conflict None

What is actually happening?

Other relevant information

deraw commented 5 years ago

Hi! Yeah the same thing appears with Vuetify. Maybe all vuepress styles should be prefixed @ulivz? This will prevent the majority of conflicts but you will still have issues with styles overriding each other due to specifity. For example Vuetify uses !important in it's styles, so it will override the vuepress styles

It's the same issue for every CSS framework, try to put two of them at the same time and it will be broken.

So @IgorDePaula, even with an update of the vuepress default theme styles you will have an issue

IgorDePaula commented 5 years ago

I dont understand

IgorDePaula commented 5 years ago

@Deraw- You suggest me create a new theme for vuepress?

deraw commented 5 years ago

@IgorDePaula

For example, Vuepress applies a style to body, as does Bootstrap or Vuetify, so some styles are overwrited. One solution would be to prefix the CSS of Vuepress, so instead of body, it would style .vp-body (for example), but I don't think it will be done And in Bootsrap or Vuetify, you have styles like helper classes that uses !important to override styles

Creating a new theme may be the solution, indeed!

IgorDePaula commented 5 years ago

=/ , I appreciate your attention

mgh87 commented 5 years ago

Is there any solution for vuepress with vuetify that does not completely wrack the default theme?

deraw commented 5 years ago

@mgh87 Nope! I mean it's like you wanted to use both materialize & bootstrap at the same time, you would have conflicts Maybe you can create a Vuepress theme that uses Vuetify and keeps the same structure as the default theme!

mgh87 commented 5 years ago

@Deraw- Well, my approach would be to use vuetify css only within its components. I tried to achieve this in creating own single file components with scoped css for arrangements where I use vuetify, but this does not work. After a loaded a page with a vuetify component, the css gets overwritten and is used for further navigation through the page.

I currently try to use just the bits of stylus definitions from vuetify that is required for the used components to render proper, but that is a rather hacky approach and will just increase maintenance cost. Is there any better approach to solve this?

deraw commented 5 years ago

@mgh87 Yes that's normal, Vuetify has global styles in it and will register them in <head> I'll try to create a Vuepress + Vuetify theme

mgh87 commented 5 years ago

@Deraw- we currently fixed the problem with the styles by restricting which styles we add to our components, that works rather good. So there is no urgent need for us to have a theme. Ty for the explanation where the injection is done.

ibdf commented 4 years ago

Anyone else came up with a creative solution to this problem? Vuepress seems like a great solution to create documentation but when rendering components there's so much conflict between the component css being rendered and the theme's css.

I tried creating a component with a