如何使用ejs link css 文件？

Question

在我的目录中，我创建了一个 public 文件夹，我在其中放置了另一个名为 css 的文件夹，该文件夹位于 styles.css。在我名为 views 的目录中的另一个文件夹中，我放了我的 ejs 文件，我想 link styles.css 像这样： <link rel="stylesheet" type="css/text" href="css/styles.css"> 但是，这不起作用。我的浏览器控制台甚至都没有出现错误。

Answer 1

如果您使用 npm 和 Express，我们需要为静态内容（如您的 css 文件）设置一个 public 文件夹：

1) 在您的根文件夹中，创建一个名为 'public' 的文件夹，然后在其中创建另一个名为 'css' 的文件夹，并将您的 styles.ccs 文件放在那里。

2) 在您的 JS 应用程序文件中（例如 app.js），我们需要这样的内容：

//jshint esversion:6
const express = require('express');
const ejs = require("ejs");
const app = express();

app.set('view engine', 'ejs');
app.use(express.static("public"));

app.get('/', (req, res) => {
    res.render('index', { foo: 'FOO' });
});

3) 在您的根文件夹中，创建一个名为 'views' 的文件夹，并在其中放置您要渲染的 EJS 文件（例如 index.ejs），像这样建立 link： <link rel="stylesheet" href="/css/styles.css">:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/styles.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

在这种情况下，您应该能够看到 css 代码应用于主路由“/”，呈现 index.ejs 文件。希望对你有帮助！

如何使用ejs link css 文件？

How to link css file with ejs?

html

css

styles

stylesheet

ejs