Не подключается css в node js

Question

При отслеживание ссылок с помощью express, я загружаю ejs шаблоны если отслеживать такую ссылку, то css файл загружается:

app.get('/users', function (req, res) {
    res.render('users');
});

А если такую ссылку, то css файл не подключается.

app.get('/users/:name', function (req, res) {
    res.render('users', { user_name: req.params.name });
});

ejs шаблон, который загружается, в первом случае.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="public/css/style.css">
    <title>User</title>
</head>

<body>
    <%- include('blocks/header.ejs'); -%>
        <div class="content">
            <h1>My profile</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum in vero porro quia ea perferendis distinctio
                omnis non veniam rem explicabo, itaque nostrum doloribus et quidem saepe voluptatem id tempora.</p>
        </div>
</body>

</html>

ejs шаблон, который загружается, во втором случае(css не подключается).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="public/css/style.css">
    <title>User</title>
</head>

<body>
    <%- include('blocks/header.ejs'); -%>
        <div class="content">
            <h1>My profile</h1>
            <p>Name - <%= user_name %></p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum in vero porro quia ea perferendis distinctio
                omnis non veniam rem explicabo, itaque nostrum doloribus et quidem saepe voluptatem id tempora.</p>
        </div>
</body>

</html>

Как это исправить?

Answer 1

Просто нужно использовать абсолютные ссылки!

href="/public/css/style.css" вместо href="public/css/style.css"

app.js

const express = require('express');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

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


app.get('/users/:user_name?', (req, res) => {
  res.render('users', { user_name: req.params.user_name || '[no name]' });
});


const port = process.env.PORT ? +process.env.PORT : 3000;
const host = 'localhost';
app.listen(port, host, () => {
  console.log(`start on port: ${port}`);
});

users.ejs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/public/css/style.css">
  <title>User</title>
</head>

<body>
  <%- include('blocks/header.ejs'); -%>
  <div class="content">
    <h1>My profile</h1>
    <p>Name - <%= user_name %></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum in vero porro quia ea perferendis distinctio omnis non veniam rem explicabo, itaque nostrum doloribus et quidem saepe voluptatem id tempora.</p>
  </div>
</body>

</html>

Answer 2

Так происходит, потому что у Express при этом получаются разные корневые директории. Лучше всего использовать абсолютные ссылки вроде /css/style.css. Такой запрос обрабатывается сервером через express.static, вот на этой строке

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

Не рекомендую включать статические файлы через относительные пути при рендеринге, так вы в конце-концов запутаетесь.

БЛОГ НА HUSL

Не подключается css в node js

Ответы (2 шт):