如何将css文件与ejs链接？答案

【问题标题】：How to link css file with ejs?如何将css文件与ejs链接？
【发布时间】：2020-08-31 02:19:34
【问题描述】：

在我的目录中，我创建了一个公用文件夹，我在其中放置了另一个名为 css 的文件夹，该文件夹位于 styles.css。在我的目录中另一个名为 views 的文件夹中，我放置了我的 ejs 文件，我想用它链接 styles.css，如下所示： <link rel="stylesheet" type="css/text" href="css/styles.css"> 但是，这不起作用。我什至在我的浏览器控制台中都没有收到错误消息。

【问题讨论】：

标签： html css styles ejs stylesheet

【解决方案1】：

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

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 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 文件。希望对你有帮助！

【讨论】：

谢谢你，这个网站的人们非常乐于助人。