Webpack + React + Загрузка CSS внешних модулей

Question

Эксперты по Webpack/CSS!

мой NodeJS/React Приложение имеет следующую структуру, где я использую Webpack 3.8.1 упаковать и связать файлы.

-app
  |--actions
  |--constants
  |--components
  |--containers
  |--css
  |--reducers
  |--store
-common
-server
-webpack
  |--rules
       |--css
       |--javascript
  |--externals
  |--paths
  |--resolve
  |--webpack.config.js

Все работает как положено в разработке и производстве, но есть одна проблема, с которой я боролся: модули внешних узлов CSS. Когда я добавляю новую зависимость, которая поставляется с какими-то таблицами стилей CSS / SCSS / SASS и в этом отношении использует className чтобы стилизовать различные компоненты, я нажимаю FOUC CSS, где ни один из стилей CSS модуля внешнего узла не был распознан и поэтому отсутствует на карте, которая webpack 3 создается после завершения процесса сборки.

В качестве примера я использую Material-UI как зависимость и пока все работает, но при попытке сделать следующее:

<IconButton>
    <FontIcon className="muidocs-icon-action-home"/>
</IconButton>

... и ничего не отображается. Это только один пример, и я столкнулся с этой проблемой и с другими модулями узла! Так что я считаю, что что-то не так с моим webpack конфигурации или способ загрузки модулей CSS. Для справки, я создал суть всех webpack конфигурационные файлы.

Я сталкивался с некоторыми подобными вопросами, подобными этому, но я не уверен, поможет ли это в долгосрочной перспективе, поскольку мой проект становится больше.

Ваша помощь и мысли очень ценятся!

[Примечание] В качестве примечания, помимо внешних модулей CSS, когда я добавляю новое объявление CSS в main.cssМне все еще нужно иметь что-то вроде:

import classNames from "classnames/bind";
import styles from "../../../css/components/timeline.css";
const cx = classNames.bind(styles);

в import раздел, а затем сделать что-то вроде этого:

<div ref="container"
     className={cx("calendar-style")}/>

правильно применять стили CSS, что, опять же, я подозреваю, не является оптимальным. Как я упоминал ранее, webpack создает хэш-карту всех стилей CSS внутри .css файл под publicчей контент выглядит примерно так:

._1zvVaiwSh1X6O03wrS2gD- {
    height: 100%;
    padding: 0;
    margin: 0;
}
._2W0FVEAQcsYxEbCbWHcCE3 {
    height: 100%;
}...

Поэтому не использовать cx как указано выше, будет иметь ту же проблему, как объяснено ранее, и ни один из моих стилей CSS не применяется. Итак, следующий вопрос будет: как webpack создает эти hashes и почему? Как контролировать их генерирование или нет?