We Keep Coding

How to isolate / scope global css in vue

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

Dynamically generated CSS Angular 4

I am trying to add custom generated CSS (built from access to a database) and have it appear in the page, using Angular 4.
So far I have tried creating a component and adding it to other components (HTML files) but it appears to not be showing anything on the page, nor is it changing anything. I have also looked into adding additional CSS to each component but that will be a management nightmare for changes.
I know I could create multiple themes, or just add another class to a HTML tag. There are no themes in the system I am building and we need to have it so the user can define the styling, using any color, etc of their choosing.
Any suggestions would be greatly appreciated. Thank you.

Using JavaScript Plugins with Angular 4

I'm trying to use the Bootstrap 3 Datepicker plugin (http://eonasdan.github.io/bootstrap-datetimepicker/) with Angular 4.0.
I've included the necessary JS and CSS (and a custom JS script calling the plugin) in my angular-cli.json file and the script loads great on the first page that I open but stops working as soon as I route to another component.
I figure that I need a way to call $('.datetime-picker').datetimepicker() every time I route to the new component. How would I do that?

this is a different solution try using primeNg google it.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

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 ).

How to combine customized Twitter Bootstrap and H5BP?

I am looking for a best practices to combine between customized Twitter Bootstrap and H5BP (HTML5 Boilerplate) .
I've tried to use this shell script to quickly setup a project at this link and Initializr generator.
Ps: Customization consist in choosing the color and size... using Twitter Bootstrap customize variables
Any help is appreciated :-)

I do
git clone git://github.com/twitter/bootstrap.git.
Make some change in less files in less/*.less
You might want to change some values in variables.less
And Run make bootstrap in git cloned folder.
It will create bootstrap folder in your bootstrap folder.
Use that files in created bootstrap folder.