Блог

Главная - Вопросы по программированию - Таблица стилей CSS не найдена на сервере?

Таблица стилей CSS не найдена на сервере?

#css #node.js #reactjs #server #webpack

#css #node.js #reactjs #сервер #webpack

Вопрос:

Я использую react / webpack для запуска сервера разработки на локальном 8080. Это то, что я еще не совсем понимаю, и я сталкивался с этой проблемой раньше. Bootstrap связан в HTML и работает нормально. Однако, когда я связываю таблицу стилей, консоль выдает мне ошибку 404 not found для моей таблицы стилей.

Вот мой шаблон HTML: 

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="public/stylesheet.css" />
</head>
<body>
  <div id="root">

  </div>
</body>
</html>

Index.html и Index.js находятся на корневом уровне, как и каталог /Public, который содержит только один файл: stylesheet.css.

Почему stylesheet.css не загружается в браузере при запуске локального сервера и как мне это исправить? Спасибо.

Комментарии:

1. вы пробовали Public/stylesheet.css ? (заглавная P) — некоторые серверы (просматривающие ваш IIS) чувствительны к регистру

2. Спасибо! Я уже пробовал public раньше, как вы можете видеть в примере выше, однако общедоступный каталог не был в ИСТИННОМ корне проекта. Это было внутри каталога приложения. Я переместил общедоступный каталог на один уровень выше, к истинному корню (с конфигурациями webpack и модулями узла), и это сработало!

3. Есть ли причина, по которой это работает, кстати? Браузер просто ожидает, что общая папка будет находиться в самом настоящем корневом каталоге?

4.Я не уверен во внутренней работе webpack, но браузер ничего не «ожидает». Браузер ищет файл там, где вы говорите, что он найден; в данном случае: <application_root>/public/stylesheet.css или в расположении удаленного сервера, например: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css — обновлено: public в этом случае определяется как каталог того же уровня, что и html файл.

Ответ №1:

если вы предоставляете общий доступ к папке с Express вот так

 app.use(express.static(path.join(__dirname, 'public')));

тогда вам не нужно указывать ‘public’ в исходном коде.

другими словами, это

 <link rel="stylesheet" href="public/stylesheet.css" />

должно быть это

 <link rel="stylesheet" href="/stylesheet.css" />