Александр

Информации не слишком много, но рискну предположить, что проблема в `publicPath`

Уточните, что именно значит "sass не собирает"?
1) webpack-dev-server выдаёт какую-то ошибку в терминале и прекращает работу?
2) отрабатывает нормально, но просто молча не билдит sass?
3) подтягивает ли он старую версию ваших sass-файлов, сбилженных до этого командой webpack?

Если поведение подходит под пункты 2 или 3, то скорее всего, `webpack-dev-server` билдит ваш код, но не знает, как отправить его браузеру. Он хранит сбилженный код в оперативной памяти, поэтому старые копии остаются в файловой системе – вот почему браузер всегда подтягивает старые файлы

Обычно такие проблемы возникают, если что-то не так с выходными полями `publicPath` и `path`. Попробуйте "поиграться" с ними, добавив, например `/assets`, и проверьте в браузере, какую именно статику он пытается запросить и по какому урлу

Если не поможет, всегда можно запустить эти две команды одновременно, должно сработать:

webpack --watch
webpack-dev-server

Можно запустить каждую из этих команд в отдельной вкладке терминала, или же поставить нод-модуль concurrently, а потом просто писать так:

concurrently --raw  --kill-others "webpack --watch" "webpack-dev-server"

--kill-others нужен для того, чтобы если один из процессов упадёт, второй упал бы тоже — в данном случае это будет удобно

В Реакте не бывает случаев, когда наследование компонентов оправдано. Об этом подробно написано в официальной документации

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

Контент должен прокидываться через this.props.children компонента MainContainer, его рендер должен возвращать что-то вроде этого:

<div>
  <Header />
  <Menu />

  <div className="content">
    {this.props.children}
  </div>

  <Footer />
</div>

Использование:

<MainContainer>
{/* Контент */}
</MainContainer>