如何将 css 文件与 ejs 链接？
[英]How to link css file with ejs?
问题描述
In my directory I have created a public folder in which I have put another folder named css in which is located styles.css.
在我的目录中，我创建了一个公用文件夹，在其中放置了另一个名为 css 的文件夹，该文件夹位于 styles.css。 In another folder in my directory named views I have put my ejs file, with which I want to link styles.css like this: <link rel="stylesheet" type="css/text" href="css/styles.css"> However this does not work.在我的目录中另一个名为 views 的文件夹中，我放置了我的 ejs 文件，我想用它链接 styles.css 像这样： <link rel="stylesheet" type="css/text" href="css/styles.css">但是这不起作用。 I dont even get an error in my browsers console.我什至在我的浏览器控制台中都没有收到错误。
1 个解决方案
解决方案1
0 已采纳 2020-05-14 16:05:45
If you are using npm and Express, we need to set up a public folder for the static content (like your css file):如果您使用 npm 和 Express，我们需要为 static 内容（如您的 css 文件）设置一个公共文件夹：
1) In your root folder, create a folder called 'public', then another one inside called 'css' and place your styles.ccs file in there. 1）在您的根文件夹中，创建一个名为“public”的文件夹，然后在其中创建另一个名为“css”的文件夹，并将 styles.ccs 文件放在那里。
2) In your JS application file (eg app.js), we need to have something like this: 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) In your root folder, create a folder called 'views' and inside place the EJS file you want to render (eg index.ejs), stablishing the link like this: <link rel="stylesheet" href="/css/styles.css"> : 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>
In this case, you should be able to see the css code applied in the home route "/", rendering the index.ejs file.在这种情况下，您应该可以看到在主路由“/”中应用的 css 代码，呈现 index.ejs 文件。 I hope it help you!我希望它对你有帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.