將.css文件添加到ejs

Question

我正在使用 ejs 處理 node.js(express)，但我無法向其中包含 a.css 文件。我分別嘗試了與 html-css duo 相同的操作，但效果很好……我如何將相同的內容包含在我的.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>

樣式.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。

這里需要注意2件事

style.css是一個外部 css 文件。 所以你不需要該文件中的樣式標簽。 它應該只包含 css。
在您的 Express 應用程序中，您必須提及提供靜態文件的公共目錄。 像 css/js/image

它可以通過

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

假設您將 css 文件放在應用程序根目錄中的公共文件夾中。 現在你必須在你的模板文件中引用 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“模板”文件的樣式）。 以下是需要進行的簡單 3 個步驟：

將名為“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 文件）， app.use()已經提供了一個名為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 個步驟后，每次在app.get()方法中執行res.render('ejsfile') ，您都會自動看到正在調用的 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

正如我所看到的，您正在將 EJS 與 express.js 一起使用

首先，有一個更好的方法來添加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

Answer 7

好吧，@Deepdarshan，您設置視圖引擎的方法較新，但我進行了試驗，它不適用於 ejs，也許還有其他視圖引擎！

將.css文件添加到ejs

問題描述

6 個解決方案

解決方案1
142 已采納 2013-09-05 10:25:33

解決方案2
10 2017-10-07 10:54:58

解決方案3
10 2018-08-13 23:47:32

解決方案4
0 2021-06-04 04:41:00

解決方案5
0 2021-08-06 18:58:52

解決方案6
-2 2017-07-20 13:34:54

解決方案7
-2 2023-01-29 23:38:58

將.css文件添加到ejs

問題描述

6 個解決方案

解決方案1 142 已采納 2013-09-05 10:25:33

解決方案2 10 2017-10-07 10:54:58

解決方案3 10 2018-08-13 23:47:32

解決方案4 0 2021-06-04 04:41:00

解決方案5 0 2021-08-06 18:58:52

解決方案6 -2 2017-07-20 13:34:54

解決方案7 -2 2023-01-29 23:38:58

解決方案1
142 已采納 2013-09-05 10:25:33

解決方案2
10 2017-10-07 10:54:58

解決方案3
10 2018-08-13 23:47:32

解決方案4
0 2021-06-04 04:41:00

解決方案5
0 2021-08-06 18:58:52

解決方案6
-2 2017-07-20 13:34:54

解決方案7
-2 2023-01-29 23:38:58