Имена классов CSS интерпретируются в другом порядке при производстве / разработке
Я использую приложение create-response-app v2.
У меня есть компонент с несколькими именами классов: «x15 x14 login-form__field». В HTML они имеют одинаковый порядок в обеих средах.
В производственной сборке '.x14' имеет более высокий приоритет, чем 'login-form__field'. Они меняются местами (и верны) в развитии. Любые идеи? Я знаю, что webpack выполняет подъем и постобработку, но не уверен, почему это повлияет на это.
Ваше здоровье
-- Обновлять --
Я только что заметил, что пользовательский класс загружается как встроенный стиль, поэтому он получает приоритет. Я предполагаю, что это делает webpack. Можно ли каким-то образом указать webpack / CRA загружать стили как таблицы стилей, а не встроенные. В противном случае это означает, что стили не репрезентативны для производства.
- Второе обновление -
Приложение Create-react-app использует styleLoader для встроенных стилей в dev для горячей перезагрузки и генерирует CSS только для производства. Это имеет смысл.
Я не катапультировался. Используя конфигурацию по умолчанию, предоставленную CRA. Посмотрите мое обновление, чтобы узнать, почему я думаю, что это происходит, но не знаю, как исправить.
У меня аналогичная проблема: стили разработки не отражают то, что будет в производстве. Я вижу, что в разработке все стили, но для производства это файл css. Как решить эту проблему. Я использую сценарий реакции версии 3.0.1
Ответы 2
Если вы используете модули css в своем проекте и случайно используете composes в своих классах, это может произойти. Если вы используете композиции в одном классе для наследования свойств из другого класса в другом файле, то для этой цели порядок не годится.
Приложение Create-react-app использует styleLoader для встроенных стилей в dev для горячей перезагрузки и генерирует CSS только для производства.
Интересно. Вы выбросили, или это конфигурация Webpack по умолчанию, которую вы используете? Похоже, хороший кандидат для сообщения об ошибке.