如何将css文件与ejs链接起来?

问题描述 投票:0回答:1

在我的目录中,我创建了一个公共文件夹,其中我放了另一个名为css的文件夹,其中有style.css。在我的另一个名为views的文件夹中,我把我的ejs文件放在其中,我想用它来链接style.css,就像这样。<link rel="stylesheet" type="css/text" href="css/styles.css">然而,这并不工作,我甚至没有在浏览器的控制台中得到一个错误。

html css styles ejs stylesheet
1个回答
0
投票

如果你使用的是npm和Express,我们需要为静态内容(比如你的css文件)建立一个公共文件夹。

1) 在你的根目录下,创建一个名为 "public "的文件夹,然后在里面再创建一个名为 "css "的文件夹,把你的style.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文件。希望对你有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.