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>
Related
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
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 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">
I'm currently having the problem that I leverage the Airbnb dates in two different locations within my React project. The dates are styled differently. Therefore, I created 2 separate CSS files that overwrite the default styling.
Even though, there are 2 different CSS files in 2 different locations the latest changes overwrite the initial styling changes. So for some reason, both datepickers share the same styling.
I want to mention that I use style-loaders.
Any ideas?
2020:
For anyone who comes across this now and also has this issue, you may have tried to use CSS modules since that would eliminate the “global CSS” problem.
However, I tried that and it doesn’t load CSS module files so that won’t work at all.
However, I was able to solve it by using styled-components. Each datepicker had it own component and I used styled-components to write a base container and then, ALL the override styles for each datepicker goes into that styled component.
Boom, that solves the problem of the CSS styling clashing globally.