I am using Vue and Vuetify inside a WooCommerce. Everything works fine, except the Vuetify css is applied to the entire page. I just want Vuetify css to be applied to the Vue app.
The Vue app is inside this div. I guess one way is to rebuild the Vuetify css by adding this woocommerce-MyAccount-content class. But I don't know how to do this. I use Vue CLI 3 to create my Vue project.
Do I need to configure the webpack?
Is there another way?
<div class="woocommerce-MyAccount-content">
Related
Currently I'am using antd for it's components, to use them properly I need to import antd css.
When I add this line of code #import '~antd/dist/antd.css'; to my css file to make the antd's components work, it messes up my entire application css.
Is there anyway to fix this? Or Am I importing antd css incorrectly?
I am writing an app with Vue that is meant to be included on my clients' websites as a little on-page widget. Those client websites may or may not be using Bootstrap. Those that do use Bootstrap are conflicting with the bootstrap-vue built into my Vue app, which is causing all sorts of display issues within my app as well as the rest of the website.
Before using bootstrap-vue, I tried just using Bootstrap in my Vue app, and I was able to add a class wrapper around each Bootstrap module in the SCSS config, like in the code snippet below, and that worked great for the CSS. My app relies heavily on modal pop-ups and unfortunately the javascript portion of Bootstrap was conflicting.
I decided to try bootstrap-vue, to avoid those javascript conflicts. The modals work great now, but I have not found a way to contain the bootstrap-vue CSS to my own wrapper class. It looks like bootstrap-vue only works when the bootstrap is included at the original, root level. Any time I try to wrap any portion of bootstrap-vue or Bootstrap with a class, it won't compile.
I have tried a multitude of things like this, which works when using Bootstrap alone, but not with bootstrap-vue:
.mywrapperclass {
#import "node_modules/bootstrap/scss/type";
#import "node_modules/bootstrap/scss/modal";
#import "node_modules/bootstrap/scss/images";
#import "node_modules/bootstrap/scss/code";
...
#import "node_modules/bootstrap-vue/src/index.scss";
}
Does anyone know how I can keep my app's bootstrap-vue css contained to a class and not affect the page as a whole? If not, is there a way to do this with Vuetify or any other packages that may help me to achieve this while also providing modal pop-up functionality?
I have a component that implements a lib that requires Bootstrap. But I don't want to apply Bootstrap to the rest of the project. So I imported the Bootstrap CSS inside the component style file. When I use this component inside another component, the style applies to the entire page including to other pages after I access the page that includes the component. I already have tried to use ViewEncapsulation options, but unsuccessfully.
We are creating VueJS/Vuetify components that are placed in an existing website that uses Bootstrap 3. Vue and Vuetify do not properly scope their CSS to a local scope and instead pollute the global scope. We have made some changes that seem to over come that issue. But now, we are seeing something we can't find a solution for. Instead of seeing the Vuetify date picker, we instead see the Bootstrap picker. Is there a way to force the Vuetify picker to display?
I have had the same issue recently. Most likely you are not using <v-app> and <v-content> to wrap your app and content respectively.
It is required for some components to display correctly.
See the docs here
Solution based on idea from here How to include css files in Vue 2 helps me
<style scoped>
#import 'bootstrap/dist/css/bootstrap.css';
#import 'bootstrap-vue/dist/bootstrap-vue.css';
</style>
We are using Vuetify in a VueJS 2 app.
This Vue app is used inside another web application which doesn't use Vue.
However the CSS of Vuetify is leaking out of the Vue app. This causes the Vuetify CSS to apply styles to the web application and changes its styles, which is an undesired side effect.
How could we avoid the Vuetify CSS leaking out of Vue app?