Одна и та же таблица стилей объединяется в разные пакеты и загружается несколько раз

#css #reactjs #webpack #less #antd

#css #reactjs #webpack #Меньше #antd

Вопрос:

Я создаю проект React / Antd с меньшим количеством таблиц стилей.

При запуске на сервере разработки webpack все кажется нормальным, но когда я создаю проект, одна и та же таблица стилей, похоже, загружается при посещении разных страниц.

Например, я оформил компоненты Card на странице 1 и странице 2. Когда я захожу на страницу 1, компонент Card правильно оформлен с правильным порядком объявления:

 .my-custom-card {
  margin: 10px;
}

.ant-card {
  margin: 0;
}

Затем, когда я захожу на страницу 2 и возвращаюсь на страницу 1, загружается та же таблица стилей ant-card. Порядок объявления теперь становится:

 .ant-card {
  margin: 0;
}

.my-custom-card {
  margin: 10px;
}

.ant-card {
  margin: 0;
}

и поле, объявленное в моем пользовательском классе, перезаписывается вновь загруженной таблицей стилей ant-card.

Для пояснения, единственная таблица стилей, содержащая .ant-card, поступает из пакета antd. Эта таблица стилей дважды загружалась из одного и того же пакета.

Этого не происходит на webpack-dev-server, только когда я создаю проект, поэтому я склоняюсь к потенциальным проблемам во время сборки.

1. Для всех, кто сталкивался с этой проблемой, то, что я не сделал, это должным образом оптимизировал webpack SplitChunksPlugin. Настройки по умолчанию должны сделать свое дело. webpack.js.org/plugins/split-chunks-plugin

Ответ №1:

Сервер разработки Webpack обслуживает необработанные файлы и ресурсы локально. При этом не будут использоваться связанные файлы. При создании пакетов, если существуют конфликтующие стили, было бы неплохо заблокировать ваши стили css с помощью контейнерного класса css.

   .page1-container {
    .ant-card {
          margin: 10px; 
          }
       }
   }
  .page2-container {
    .ant-card {
         margin: 20px;
         }
     }     
   }