Не удается получить таблицу стилей для работы с ejs для node.js

Я пытаюсь создать простой сервер с node, express и ejs для шаблона. Я получил сервер, чтобы указать на страницу, загрузить его и даже способен генерировать другие биты кода с помощью оператора include. Однако по какой-то причине таблица стилей не загружается.

app.js

var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
fs = require('fs');

var PORT = 8080; 

app.set('view engine', 'ejs');

app.get('/', function(req, res){
res.render('board.ejs', {
    title: "anything I want",
    taco: "hello world",
    something: "foo bar",
    layout: false
  });
});


app.listen(PORT);
console.log("Server working");

Файл ejs находится в каталоге views/board.ejs

<html>
 <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='../styles/style.css' />
 </head>
 <body >
    <h1> <%= taco %> </h1>
    <p> <%=  something %> </p>
 </body>
</html>

и style.css находится в каталоге styles/style.css относительно app.js

p {
  color:red;
}

Я пробовал каждый путь, который я могу представить для href ссылки, в том числе относительно того, где мои localhost указывает относительно app.js относительно board.ejs и даже просто style.css, но ни один из них не работает. Любые предложения приветствуются.

Ответ 1

Объявить статический каталог:

app.use(express.static(__dirname + '/public'));

<link rel='stylesheet' href='/style.css' />

Ответ 2

в app.js:

 you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles"));

в файле ejs:

<link rel='stylesheet' href='/styles/style.css' />

Ответ 3

Недавно я работал с той же самой вещью, и мой CSS не работал. Наконец-то я понял свое дело. Мой статический путь был как ниже,

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory =  express.static(publicDirectoryPath);
app.use(staticDirectory);

и моя структура папок была похожа на

Хитрость в том, что экспресс-доступ только определил статический путь, в моем случае CSS был вне общедоступного, поэтому он не работал, и внезапно я перемещаю папку CSS в свою общую папку и все. Работает красиво.

Выше пример был только для одного статического пути. Для нескольких статических путей вы можете использовать код ниже

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const cssDirectoryPath = path.join(__dirname, '../src/css');
const staticDirectory =  express.static(publicDirectoryPath);
const cssDirectory =  express.static(cssDirectoryPath);


app.use(staticDirectory);
app.use('/css/',cssDirectory);

А мой общий HTML файл -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet"  href="../css/styles.css">
</head>
<body>
<h1>this is index page</h1>
</body>
</html>