Блог

Когда я захожу в localhost:3000 свой css, он работает, но когда я захожу в localhost:3000/r/test свой css, он не работает, и я получаю это сообщение:

 Refused to apply style from 'http://localhost:3000/r/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.  

Всякий раз, когда у меня есть маршрут, где путь длиннее, чем один дополнительный путь (я не уверен, что это даже правильный термин), мой css вообще не работает. Например, эти маршруты будут работать:

 app.get('/', (req, res) =gt; {  ... ) app.get('/cats', (req, res) =gt; {  ... ) app.get('/dogs', (req, res) =gt; {  ... )  

Но это не сработает:

 app.get('/cats/test', (req, res) =gt; {  ... ) app.get('/dogs/blah', (req, res) =gt; {  ... ) app.get('/hamster/foo', (req, res) =gt; {  ... )  

Мой index.js файл:

 const express = require('express'); const path = require('path'); const axios = require('axios'); const app = express();  app.set('view engine', 'ejs'); app.set('views', path.join(__dirname   '/views'));  app.use(express.static(path.join(__dirname, 'public')));  app.get('/', (req, res) =gt; {  res.render('home'); });  app.get('/r/test', (req, res) =gt; {  res.render('test'); });  app.listen(3000, () =gt; {  console.log(`Listening at http://localhost:3000`); });  

Мой файл test.ejs:

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" href="styles.css"gt;  lt;titlegt;Testlt;/titlegt; lt;/headgt; lt;bodygt;  lt;h1gt;Hilt;h1gt; lt;/bodygt; lt;/htmlgt;  

Структура моего проекта такова:

 Project  |   -- public  | |  |  --styles.css  |   -- views  | |   |  -- home.ejs  |  -- test.ejs  |   --index.js  

Поместите файл CSS в общий каталог и добавьте / href ссылку, например

 lt;link rel="stylesheet" href="/styles.css"gt;  

Теперь он будет запрашивать localhost:3000/style.css каждый раз, независимо от того, на каком URL вы находитесь.

/ укажите на корневой каталог

Было бы лучше иметь отдельный путь для обслуживания статических файлов

Измените статический путь на

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

и в файле ejs используйте его как

lt;link rel="stylesheet" href="/static/styles.css"gt;