How to include Bootstrap in Webpack so that it does not replace other styles?

Question

JavaScript

Good afternoon comrade. I started using Bootstrap in a project, and I ran into a problem that when importing Bootstrap's css, it will replace other global styles such as the Leaflet library. How can it be conveniently connected so that it is connected selectively only in those files where you call it or maybe there are better options?

Answer 1

I solved the problem as follows:
In addition to Bootstrap and other libraries that have overlapping styles, you need to:
1) Place Bootstrap at the very top
2) Write a custom css file at the bottom that controls the behavior of Bootstrap.
Read more https://medium.com/commencis/how-to-import-bootstr...
4th point

Answer 2

Highlight your custom styles in scope and hash will be added to them. And bootstrap won't have them.
https://github.com/webpack-contrib/css-loader#scope
The solution is a scope to do.