Я работаю над этим проектом, который был реорганизован с помощью ngX-Rocket и Angular 7. Bootstrap 4 и ng- bootstrap были добавлены в проект. До этого bootstrap 3 использовался один. angular 2 страниц, которые мы имели до рефакторинга, используют bootstrap 3, но некоторые новые страницы используют bootstrap 4. Проблема в том, что новый bootstrap переписывает стили из старого bootstrap 3 , портя страницы.
Способ, которым включен boostrap 3, заключается в добавлении их в индекс. html:
.....
<link href="../../../styles/css/bootstrap.css" rel="stylesheet" />
<link href="../../../styles/css/bootstrap-modal.css" rel="stylesheet" />
....
bootstrap 4 добавляется из Angular. json:
.....
"styles": [
"src/main.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/ngx-toastr/toastr.css",
"node_modules/ng2-dnd/style.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/highcharts/highcharts.js",
"node_modules/highcharts/highcharts-more.js",
"node_modules/highcharts/modules/solid-gauge.js"
]
...
Мой уровень квалификации по настройке Angular приложения и CSS невысок, поэтому я могу неправильно понять некоторые понятия. У меня есть несколько идей, чтобы решить эту проблему:
1 - Найти способ сделать приоритет bootstrap 3 выше bootstrap 4. Это было бы хорошо, потому что все страницы будут работать как прежде 2 - Перезаписать bootstrap 4 стиля, с некоторыми пользовательскими, но 1: 1 с bootstrap 3. Мне это не очень нравится.
Есть хоть что-нибудь?