Initial situation

Это начальная ситуация (скриншот из инструментов разработчика Firefox). В заголовке есть <link rel="stylesheet">. Обратите внимание, что к элементу <body> (нижнее окно просмотра) не применяются никакие стили. Как вы можете видеть на втором рисунке, веб-запрос к этой таблице стилей действительно выполняется:

Web request to stylesheet

Если я перейду на вкладку Style Editor в инструментах разработчика Firefox и добавлю дополнительный символ (в данном случае новую строку между import и body), это заставит Firefox обновить таблицу стилей и когда это происходит, стили применяются к моей веб-странице.

Style editor tab in Firefox Updated element inspector with applied styles

Как я могу убедиться, что мои стили применяются при загрузке страницы?

РЕДАКТИРОВАТЬ: Я должен упомянуть, что у меня не было этих проблем при тестировании моего приложения с использованием сервера разработки create-react-server или при использовании python3 -m http.server в качестве веб-сервера. Это происходит только тогда, когда я использую nginx в качестве сервера, хотя я не могу представить, какую разницу может иметь сервер, поскольку все веб-серверы возвращают точно такой же статический контент.

0
Maurits van Altvorst 13 Ноя 2019 в 23:38
1
Это происходит только в Firefox или других браузерах?
 – 
j08691
13 Ноя 2019 в 23:40
Это происходит в Firefox Nightly, последней сборке Chrome, и в Safari iOS 13, насколько я тестировал.
 – 
Maurits van Altvorst
13 Ноя 2019 в 23:41

1 ответ

Проблема заключалась в том, что мой веб-сервер отправлял MIME-тип text/plain вместо text/css. Я решил это в nginx, добавив include mime.types; к элементу html в nginx.conf и создав файл mime.types со следующим содержимым:

types {
  text/html                             html htm shtml;
  text/css                              css;
  text/javascript                       js;
}

Похоже, что это общая проблема с людьми, использующими образ докера nginx:latest.

0
Maurits van Altvorst 14 Ноя 2019 в 00:07