时间戳

首页 > 解决方案 > 如何将css文件与ejs链接？

html - 如何将css文件与ejs链接？

问题描述

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

标签： htmlcssstylesejsstylesheet

解决方案

如果您使用 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 文件。我希望它对你有帮助！

推荐阅读