Question

我正在使用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);

和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>
   &nbsp;  
<% } %>
   </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文件：

<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>

Answer 1

您的问题实际上并不是针对ejs的。

这里要注意的两件事

style.css 是外部css文件。所以你不需要该文件中的样式标签。它应该只包含css。
在您的快递应用中，您必须提及您从中提供静态文件的公共目录。像css / js / image

可以通过

app.use(express.static(__dirname + '/public'));

假设您将css文件放在应用程序根目录中的公共文件夹中。现在你必须引用你的tamplate文件中的css文件，像

<link href="/css/style.css" rel="stylesheet" type="text/css">

这里我假设您已将css文件放在公共文件夹中的css文件夹中。

所以文件夹结构是

.
./app.js
./public
    /css
        /style.css

Answer 2

您可以使用此

     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
      });
     });

把它放在模板上

   <%- myCss.style %>

只需构建style.css

  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>

我试着用一些自定义的CSS。它对我有用

Answer 3

为了在Express应用中提供静态CSS文件（即，使用CSS样式文件在Express应用中为ejs“模板”文件设置样式）。这是需要执行的三个简单步骤：

将名为“ styles.css”的css文件放置在名为“ assets”的文件夹中，将assets文件夹放置在名为“ public”的文件夹中。因此，css文件的相对路径应为“ /public/assets/styles.css”
在每个ejs文件的开头，您只需用<link href=… />调用css文件（就像在常规html文件中一样），如下面的代码所示。确保将以下代码直接复制并粘贴到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'));
```

按照以下简单的3个步骤进行操作之后，每次在res.render('ejsfile')方法中app.get()时，您都会自动看到正在调用的CSS样式。您可以通过在浏览器中访问路由来进行测试。

Answer 4

我尝试了不同的方法。我为我的样式创建了一个名为 styles.ejs 的 ejs 文件，并像这样在标签中添加了所有 css。

<style>
    body {
      font-family: Tahoma, Geneva, Verdana, sans-serif;
    }

    #container {
      margin: 0 10%;
      padding: 20px;
      border: 10px solid #c8102e;
    }
</style>

并且我在 index.ejs 的 head 标签中包含了这个文件，就像这样。

<head>
   <%- include('./css/styles'); %>
</head>

对我来说效果很好。

Answer 5

正如我所见，您正在使用带有 express.js 的 EJS

首先，有一个更好的方法来添加 EJS
```
 app.set("view engine", "ejs");
```
为此，您的文件结构应该像
```
 .
 ./app.js
 ./view
     /index.ejs
```
并且要将 CSS 添加到您的 EJS 文件中，您必须使用“public”文件夹（或任何其他名称，名称无关紧要），您可以从中提供静态文件，如 CSS、JS 或图像
要访问它，您可以使用
```
 app.use(express.static("public"));  //better and newer way than first answer
```
并且是您的 EJS 文件，您可以通过
链接您的 CSS
```
 <link rel="stylesheet" href="css/style.css">
```
这里我假设您将 CSS 文件放在公共文件夹内的 CSS 文件夹中

因此，您的文件结构将类似于
```
 .
 ./app.js
 ./public
     /css
         /style.css
 ./view
     /index.ejs
```

Answer 6

app.use(express.static(__dirname + '/public'));<link href="/css/style.css" rel="stylesheet" type="text/css">

所以文件夹结构应该是：

.
./app.js
./public
 /css
 /style.css

将.css文件添加到ejs

6 个答案: