Express.js проблема StaticPath | CSS не применяется на одной странице, в то время как HBS не загружается на другой странице

Question

Я использую Express.js и установлен статический путь.

Что я пытаюсь сделать:

1. Подавать 2 файла .hbs -> (index.hbs & about.hbs)
2. Загрузите частичное в обоих из них (заголовок)
3. Примените небольшой файл css

Что происходит:

1. CSS загружается в index.hbs, а частичный не загружается.
2. CSS НЕ загружается в about.hbs во время частичной загрузки.
3. Получение этой ошибки в окне консоли about.hbs: отказался применить стиль из 'http: // localhost:3000 / public / css / homePageStyles.css', потому что его тип MIME ('text / html') не является поддерживаемым типом MIME таблицы стилей , включена строгая проверка MIME.

Установка статического пути:

      const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))

Структура папки:

Ссылка на полный исходный код: https://github.com/jeeemmyy/7.-Partials

Answer 1

Ваша проблема связана с тем, как вы регистрируете путь к статическим ресурсам в Express .

Ваша регистрация выглядит так:

      const staticPath = path.join(__dirname, "../public")
app.use(express.static(staticPath))

Это указывает Express на поиск в папке "../public" на сервере статического файла, путь которого относительно папки ../public совпадает с путём запроса.

Например, запрос «localhost:3000 / css / homePageStyle.css» будет соответствовать файлу на сервере по адресу «../public/css/homePageStyle.css».

Но обратите внимание, что «public» не включается в путь HTTP-запроса, потому что это корневая папка, в которой Express ищет статические файлы.

Чтобы исправить ссылки CSS в шаблонах, вам нужно будет сделать одно из следующих действий:

1. Удалите "public" из ссылки стиля href в ваших шаблонах: <link rel="stylesheet" href="../../public/css/homePageStyles.css"> становится <link rel="stylesheet" href="/css/homePageStyles.css">.

2. Укажите "/ public" в качестве префикса виртуального пути при регистрации пути к статическим ресурсам в Express: app.use("/public", express.static(staticPath)).

Далее, причина, по которой ваша домашняя страница не включает частичный заголовок, заключается в том, что ваш файл index.hbs даже не обрабатывается! У вас есть файл index.html в вашей «общедоступной» папке. Когда ваш HTTP-запрос направлен на localhost:3000 /, Express просматривает общедоступную папку сервера и находит совпадение с index.html и возвращает его, даже не выполняя обработчик GET для «/». Вам необходимо удалить этот файл index.html, поскольку вы не собираетесь его обслуживать.