Как подключить Bootstrap в Webpack что бы он не заменял остальные стили?

Question

[sumrakx]

Добрый день комраде. Начал использовать Bootstrap в проэкте, и столкнулся с проблемой что при импорте css Bootstrap он заменят остальные глобальные стили например Leaflet библиотеки. Как его можно удобно подключить что бы он подключался выборочно только в тех файлах где вызываешь или может есть лучше варианты?

Comments

[キム ファイブプラス]

Вызывать первым не?

[alex]

ну наверное нужно порядок подключения соблюдать, не? сначала бутстрап, потом лифлэт

[sumrakx]

Alex, ок я подключил сначала Bootstrap дальше leaflet. И у меня есть в:

Bootstrap
label {
display: inline-block;
margin-bottom: 0.5rem;
}
Дальше в Лифлет:
label {
display: block;
}
Но остается значение margin-bottom: 0.5rem; которое так или иначе остается и неважно как ты поставишь Bootstrap или Leaflet. Думаю как сейчас это решить.

Answer 1

[sumrakx]

Проблему решил следующим образом:
Помимо Bootstrap и других библиотек у которых пересекаются стили необходимо:

1) Поместить Bootstrap в самом вверху
2) Внизу написать кастомный css файл который правит поведение Bootstrap.

Подробнее https://medium.com/commencis/how-to-import-bootstr...
4-й пункт

Answer 2

[Александр Косицын]

Выдели свои кастомные стили в scope и к ним добавится hash. А у бутстрапа их не будет.
https://github.com/webpack-contrib/css-loader#scope
Решение это скоуп делать.