Блог

У меня есть приложение React. Внутри этого приложения у меня есть 2 большие отдельные части, давайте назовем их частью A и частью B.

Для каждой части, которую я хочу, у меня разные правила SCSS, а также я пытаюсь настроить разные настройки системы Bootstrap Grid. Для части A я хочу иметь 24 столбца, для части B я хочу иметь сеточную систему из 16 столбцов. Bootstrap позволяет иметь только один файл настройки, в который я помещаю количество столбцов. Если я добавлю несколько файлов настройки, они будут конфликтовать друг с другом.

Мой вопрос в том, как иметь несколько настроек для части A и части B?

Я рассматривал несколько точек входа для React с помощью Webpack, несколько HTML-файлов для React с помощью Webpack, но эти решения мне не слишком помогают.

Какое здесь лучшее решение? Как иметь несколько настроек webpack для каждого модуля?

Для этого есть два bootstap класса настройки с предыдущим селектором. Как только bootstrap предоставит вам настройки css , вам необходимо изменить css с вашим предыдущим классом селектора, который позволит вам css работать, только если у вас есть класс селектора.

Например

Часть с 12 сетками

 .partAClass .row{
 margin-left:0;
 margin-right:0
}
.partAClass .col-md-12{ 
  width: 100%; 
}
 

Часть B с 24grid

 .partBClass .row{
 margin-left:10px;
 margin-right:10px;
}
.partBClass .col-md-12{ 
  width: 50%; 
}