将 .css 文件添加到 ejs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18629327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding .css file to ejs
提问by user-S
im working on node.js(express) with ejs and im not able to include a .css file to it.i tried the same thing seperately as a html-css duo and it worked fine...how can i include the same in my .ejs file. My app.js goes thus:
我正在使用 ejs 处理 node.js(express)，但我无法在其中包含 .css 文件。我单独尝试了与 html-css 组合相同的事情，并且工作正常……我如何将其包含在我的 .ejs 文件。我的 app.js 是这样的：
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/home', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/about', function(req, res){
res.render('about.ejs', {
title: 'About',
nav: ['Home','About','Contact']
});
});
app.get('/contact', function(req, res){
res.render('contact.ejs', {
title: 'Contact',
nav: ['Home','About','Contact']
});
});
app.listen(3000);
and the index.ejs file:
和 index.ejs 文件：
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1> <%= title %> </h1>
<ul>
<% for (var i=0; i<nav.length;i++) {%>
<li><a href="/<%=nav[i]%>"> <%=nav[i]%> </a></li>
<% } %>
</ul>
</div>
<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>
style.css file:
style.css 文件：
<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
p { margin-bottom :20px; margin-left: 20px;}
footer {text-decoration: overline; margin-top: 300px}
div { width:100%; background:#99CC00;position:static; top:0;left:0;}
.just
{
text-align: center;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;} /* mouse over link */
a:active {color:#0000FF;}
ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
回答by mithunsatheesh
Your problem is not actually specific to ejs.
您的问题实际上并非特定于 ejs。
2 things to note here
这里需要注意2件事
style.cssis an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
style.css是一个外部 css 文件。所以你不需要该文件中的样式标签。它应该只包含 css。
在您的 Express 应用程序中，您必须提及提供静态文件的公共目录。像 css/js/image
it can be done by
它可以通过
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root. now you have to refer to the css files in your tamplate files, like
假设您将 css 文件放在应用程序根目录中的公共文件夹中。现在你必须在你的模板文件中引用 css 文件，比如
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
在这里，我假设您已将 css 文件放在公共文件夹内的 css 文件夹中。
So folder structure would be
所以文件夹结构将是
.
./app.js
./public
/css
/style.css
回答by rk.
You can use this
你可以用这个
var fs = require('fs');
var myCss = {
style : fs.readFileSync('./style.css','utf8');
};
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
myCss: myCss
});
});
put this on template
把这个放在模板上
<%- myCss.style %>
just build style.css
只需构建 style.css
<style>
body {
background-color: #D8D8D8;
color: #444;
}
</style>
I try this for some custom css. It works for me
我为一些自定义 css 尝试了这个。这个对我有用
回答by Kean Amaral
In order to serve up a static CSS file in express app (i.e. use a css style file to style ejs "templates" files in express app). Here are the simple 3 steps that need to happen:
为了在 express 应用程序中提供静态 CSS 文件（即使用 css 样式文件在 express 应用程序中设置 ejs“模板”文件的样式）。以下是需要进行的简单 3 个步骤：
Place your css file called "styles.css" in a folder called "assets" and the assets folder in a folder called "public". Thus the relative path to the css file should be "/public/assets/styles.css"
In the head of each of your ejs files you would simply call the css file (like you do in a regular html file) with a
<link href=… />as shown in the code below. Make sure you copy and paste the code below directly into your ejs file<head>section<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />In your server.js file, you need to use the
app.use()middleware. Note that a middleware is nothing but a term that refers to those operations or code that is run between the request and the response operations. By putting a method in middleware, that method will automatically be called everytimebetween the request and response methods. To serve up static files (such as a css file) in theapp.use()middleware there is already a function/method provided by express calledexpress.static(). Lastly, you also need to specify a request route that the program will respond to and serve up the files from the static folder everytimethe middleware is called. Since you will be placing the css files in your public folder. In the server.js file, make sure you have the following code:// using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files // app.use("/route", express.static("foldername")); app.use('/public', express.static('public'));
将名为“styles.css”的 css 文件放在名为“assets”的文件夹中，将 assets 文件夹放在名为“public”的文件夹中。因此css文件的相对路径应该是“/public/assets/styles.css”
在每个 ejs 文件的头部，您只需使用 a 调用 css 文件（就像您在常规 html 文件中所做的那样），
<link href=… />如下面的代码所示。确保将下面的代码直接复制并粘贴到 ejs 文件<head>部分<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />在您的 server.js 文件中，您需要使用
app.use()中间件。请注意，中间件只不过是一个术语，指的是在请求和响应操作之间运行的那些操作或代码。通过在中间件中放置一个方法，该方法将在每次请求和响应方法之间自动调用。为了在app.use()中间件中提供静态文件（例如 css 文件），express 已经提供了一个名为express.static(). 最后，您还需要指定程序将在每次调用中间件时响应并提供静态文件夹中的文件的请求路由。因为您将把 css 文件放在您的公共文件夹中。在 server.js 文件中，确保您有以下代码：// using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files // app.use("/route", express.static("foldername")); app.use('/public', express.static('public'));
After following these simple 3 steps, every time you res.render('ejsfile')in your app.get()methods you will automatically see the css styling being called. You can test by accessing your routes in the browser.
遵循这些简单的 3 个步骤后，每次您res.render('ejsfile')在app.get()方法中都会自动看到正在调用的 css 样式。您可以通过在浏览器中访问您的路线来进行测试。
回答by Riyan
app.use(express.static(__dirname + '/public'));<link href="/css/style.css" rel="stylesheet" type="text/css">
So folder structure should be:
所以文件夹结构应该是：
.
./app.js
./public
/css
/style.css
