Компоненты React Styled удалены из производственной сборки

Question

Я использую Styled Components в качестве альтернативы CSS для моего приложения React.В разработке все работает нормально (первый скриншот), но когда я запускаю производственную сборку (npm build), стили внутри тегов стилей удаляются (второй скриншот).В результате в производственной сборке отсутствуют стили.

Вот рабочая версия: http://projects.loratadin.com.s3 -website-us-east-1.amazonaws.com / weather-app /

Вот исходный код: https://github.com/Loratadin/weather-app

Answer 1

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

После долгих поисков я наконец-то узналпричина.Библиотека Styled Components использует так называемый «скоростной режим» для внедрения стилей в производство.Это заставляет стили обходить DOM` и вводиться непосредственно в CSSOM, таким образом, появляясь в инспекторе, но полностью невидимый в DOM.

К счастью, Styled Components 4.1.0 были исправлены для этой проблемы!Теперь вы можете установить глобальную переменную с именем SC_DISABLE_SPEEDY на true, чтобы отключить Speedy mode и заставить стили появляться и в Production.Имейте в виду, что вы должны сделать это в самом начале файла ввода вашего приложения, прежде чем импортировать любой стилизованный компонент, иначе он не будет работать.

Я сделал это, создав новый файл с именем globals.js, содержащий global.SC_DISABLE_SPEEDY = true , и импортировав его как самое первое в моей index.js.

Ссылка: https://www.styled -components.com / высвобождает # v4.1.0

Answer 2

Мне удалось воспроизвести вашу проблему, и похоже, что когда приложение находится в рабочем состоянии, оно не может выбирать элементы html внутри стилизованного компонента (стили не применяются к элементу).Вместо этого вам нужно будет создать дополнительные стилизованные компоненты для input и button.

Рабочий пример : https://github.com/mattcarlotta/Weather-App

Я переработал ваше приложение, чтобы упроститьего структура.Пожалуйста, прочитайте README для инструкций о том, как запустить его в разработке и на производстве (НЕ используйте вышеуказанный репозиторий для производства, так как крайне необязательно иметь express бэкэнд - я сделал это только для того, чтобы вы могли запуститьлокальная производственная сборка).

Что я изменил :

• Переместил любые styled компоненты в папку components для модульности
• Любая глобальная стилизация была помещена в папку styles
• Перемещена assets в images и импортирована в необходимый компонент styled (исключая необходимость использования require('../path/to/image'))
• Упрощенный файл App.js.Дети контролируются state и классом methods.Самое главное, превратив ваш form в контролируемый компонент , исправил метод getWeather: не разрешать пустую отправку; если вызовы AJAX завершатся неудачно, он catch выдаст ошибку (вместо того, чтобы ломать ваше приложение), и сбросить входные данные формы при успешной отправке.
• Добавлен prop-types, чтобы обеспечить согласованность props в объявлении (строка остается строкой, число остается номером и т. д.),