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

Эксперты 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 и почему? Как контролировать их создание или нет?