CRA - Реагирование на сборку с динамическим импортом c CSS

Question

Проблема:

При использовании готового пакета реакции-скриптов, входящего в комплект create-реагировать-приложение, для создания производственной сборки React динамически импортированные файлы CSS игнорируются и вместо этого все CSS похоже скомпилировано в производственную сборку.

Пример того, что происходит:

/* styles/desktop.css */
.some-class {
  background-color: white;
  margin: 0;
}

/* styles/mobile.css */
.some-class {
  border: 1px solid black;
  margin: 1em;
}
.another-class {
  background-color: black;
  padding: 3px;
}

Обратите внимание, что мы используем require () со строками шаблона в качестве импорта оператор принимает только строковые литералы, а cssEnv может быть любым количеством вещей, которые делают условный оператор несостоятельным.

/* config.js */
const cssEnv = 'desktop';
require(`./styles/${cssEnv}.css`);

Мы строим нашу производственную сборку.

$ npm run build

В папке сборки мы находим наш скомпилированный CSS. Обратите внимание, как все наши CSS файлы были скомпилированы в один (включая даже CSS, которые мы никогда не импортировали).

/* compiledCSS.chunk.css */
.some-class {
  background-color: white;
  border: 1px solid black;
  margin: 0;
}
.another-class {
  background-color: black;
  padding: 3px;
}

Аналогичный вопрос SO, который я нашел в Googling для решения:

сборка реагирующих сценариев игнорирует условные css импорт

Answer 1

Я сразу же отвечаю на свой вопрос, потому что я уже решил его, а также потому, что у меня было немного Гомера Симпсона "d'oh!" момент, когда я наконец-то нашел решение после обыска Google и документации по всему миру. Вот почему я опубликовал вопрос в надежде спасти других людей в этом времени в поисках решения, которое не было бы слишком очевидным (и, кажется, нигде не было найдено ни одного решения, которое я нашел).

Так что я не понимал, что оператор import имел динамическую c функцию импорта через import (). Поэтому решение было просто заменить require () на import ().

/* config.js */
const cssEnv = 'desktop';
import(`./styles/${cssEnv}.css`);

Теперь, когда мы собираем нашу производственную сборку, мы получаем правильную скомпилированную CSS

/* compiledCSS.chunk.css */
.some-class {
  background-color: white;
  margin: 0;
}

Мое лучшее предположение о том, что происходит, заключается в том, что реагирующие сценарии обрабатывают require () иначе, чем import (), где предоставление строки шаблона с переменными require () заставляет переменные действовать как символы подстановки (*). Поэтому, когда мы создавали производственную сборку ранее,

require(`./styles/${cssEnv}.css`);

обрабатывался как

require(`./styles/*.css`);

Следовательно, все css файлы в папке стилей были скомпилированы вместе.

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