Context: I have a Vue CLI project, consisting of two main parts: 1) what the customers see and 2) what an administrator sees. The customer part is using Bootstrap CSS and the other part is using Vue Material. Even though I am planning to rewrite the Vue Material part to Vuetify, the problem will most likely persist.
The problem: The Bootstrap CSS is conflicting with the Vue Material CSS. When the Bootstrap CSS is applied to the Vue Material section, it looks messed up. The other way around too; when the Vue Material CSS is applied to the Bootstrap section, it looks messed up.
Is there any way I could make this work?
This Vue project used to be encapsulated inside a Laravel project, making heavy use of Laravel Mix. I could then use the mix file to compile all the Bootstrap CSS into 1 bundle. This bundle would be referenced in the index page using this line:
<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">
Using two layout components in Vue, I could then toggle the stylesheets in like this:
// The Bootstrap layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = false;
document.getElementById('vue-material-stylesheet').disabled = true;
}
// The Vue-Material layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = true;
document.getElementById('vue-material-stylesheet').disabled = false;
}
It may not be a pretty solution, but it works. Also works in most browsers.
However, I now use Vue CLI instead of Laravel & Laravel Mix. This means I cannot name the generated output as easily anymore.
I have already tried using the CSS deep selector: /deep/ & >>>. But this does not fully work since bootstrap also sets styles to the :root, html & body elements. So when using the deep selector in scoped CSS, those styles are not applied because the end result would be something like this:
.customers-container {
body {
// bootstrap adds style to the body
}
}
The above does not work because the body is not a child of the customers-container but the other way around.
I feel like there might be a solution using bundle names or chunk names or something else from Webpack or Vue config. But my Webpack knowledge is not enough to work this out myself and I cannot seem to find the answer online.
First thing that comes to my mind is just downloading the bootstrap and vue-material stylesheets. Then you can try doing the following, grab the bootstrap stylesheet and wrap it in something like:
.administrator-view {
/// the complete bootstrap stylesheet
}
Do the same with the vue-material but with a customer class .customer-view
Then you can add one of those classes at the HTML or body element whenever you switch between the views.
Don't forget to include both stylesheets!
EDIT: Did a search on the site, you should check Limit the scope of bootstrap styles
Related
So i recently migrated from react to Next.Js, I am facing these issues and want to know if these have a solution :
Unlike react next can't just change a specific part of webpage and keep static part like navbar same throughout all my pages, I have to specifically add my Navbar component to all pages
The {styles.example} way of using css seems like a lot of work, I saw a lot of people using to do css within the js file, but it becomes a mess when I try to make it responsive. Is there any way i can use css just as normal like import it in js file, and use classname='example' in example.module.css
use _app
https://nextjs.org/docs/advanced-features/custom-app
import css in _app is global
https://nextjs.org/docs/basic-features/built-in-css-support
css extended
head(html way, won't apply loaders,make sure resource placed as refered): https://nextjs.org/docs/api-reference/next/head
import css (_app just like head but go webpack, named if not _app): https://nextjs.org/docs/basic-features/built-in-css-support
styled-jsx (inline,scoped by default, set global via prop): https://github.com/vercel/styled-jsx
element-style-prop: the react way
example cases
head in _app: compiled global css like bootstrap reset...
import css in _app: global custom css
head in component: compiled css for component, like date picker
import css in component: named fassion
styled-jsx: css fassion, scoped by default, global if global prop set
element-style: react fassion, element level
We made an angular 6 webapp and we would like to integrate this webapp into one of our customer webshop.
The problem is that we have some css conflict.
For example :
- The webshop uses bootstrap 3 and our app bootstrap 4.
- Some shop css are overriding webapp css.
- Some webapp css are overriding webshop css.
What is the best solution to avoid these conflicts ?
The best solution would be to use one bootstrap version for the whole project. If you mix bs3 and bs4 there will be conflicts because the classnames are (for the most (grid-)part) the same but the underlying css is different.
One solution would be to wrap the webshop in an extra div with a specific class and import bootstrap3 css only for this class, like so (in SASS)
.webshop {
#import all-of-bootstrap3;
}
That way bootstrap 3 only works for everything that's inside this wrapper. Since bootstrap has low specifity, this should be enough to overwrite it.
Ideal solution would still be to use same bootstrap-version for one project.
Edit: This of course also works the other way around, you can also wrap all of your components in one class so that all your css are using the higher specificy. Might even be the better solution if you have to support multiple clients.
you can of course also change the css from bootstrap itself, as explained here Customize Twitter Bootstrap Classnames
Good answer from #cloned
Also, you might try to wrap one app in one class and the other app in another class by putting a class on the html tag.
Then prefix all your styles for one app like this:
html.app1 .some-style {
background-color: pink;
}
And the other app like this:
html.app2 .some-style {
background-color: green;
}
If you are using scss or something similar this should be pretty straightforward since you can use nesting.
every one
I'm working on an angular application in which I need to change themes based on login info.
I tried using different css pages but that does'nt seem to work as we can use only single css page per component and switching css files looks like impossible for me. I've saved a css file in assets and tried accessing it but its not working.
Is there a way to switch styles.css based on a condition.
Im using angular 4 and typescript if that can help. Or is my approach totally wrong at this and should I be using angular themes given in angular material ?
The angular material themes are using scss while im using css. So please help!!
creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).
I have website built with many custom css styles in some css style files.I want to use twitter bootstrap in the website.but if i include it in my pages like -
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
so as you can guess because of this many styles and classes overwritten by bootstrap class and styles and so is lot of problems.so if there is way i can use twitter bootstrap css and js under a class?
I just can add my class name before every class in bootstrap.css file but that is time consuming or i go for it?? from web research i found -
.tw-bs {
#import "less/bootstrap.less";
}
by using lesscss.org.but i did not get yet how do i compile things in my windows pc so i can use twitter bootstrap under .tw-bs class only in my site.if anyone know step by step, save my time.
The best thing we have found is to use a separate CSS file where you deliberately overwrite some of the Bootstrap styles with what you want/need. For example, the default buttons in Bootstrap have rounded corners with a 4px radius. We decided that we wanted a more rounded look, so we put the following into a CSS file:
.btn{border-radius: 10px;}
When you reference your file AFTER the Bootstrap file it will overwrite the default Bootstrap values with yours. Sometimes the Bootstrap specificity is very hard to over-ride, in which case you'll need to style by referencing the ID of the element directly (which is more specific than classes.)