添加.css文件到ejs

n7taea2i 于 2023-02-01 发布在其他

关注(0)|答案(6)|浏览(160)

我在node.js（express）上使用ejs，但我无法将.css文件包含到其中。我尝试了单独作为html-css duo的相同操作，效果很好...我如何才能将相同内容包含到我的.ejs文件中。

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>

css

来源：https://stackoverflow.com/questions/18629327/adding-css-file-to-ejs

6条答案

按热度按时间

wdebmtf21#

你的问题实际上并不是特定于ejs的。
这里需要注意两件事
1.style.css是一个外部的css文件。所以你不需要在这个文件里面有style标签。它应该只包含css。
1.在express应用程序中，您必须指出提供静态文件的公共目录，例如css/js/image
这可以通过以下方式来实现

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

假设你把这css文件在公共文件夹从在你的应用根.现在你必须到refer到这css文件在你的tamplate文件，象

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

在这里，我假设你已经把css文件夹中的css文件在您的公共文件夹。
因此，文件夹结构为

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

赞(0）回复(0）举报 2023-02-01

p8ekf7hl2#

为了在express应用程序中提供一个静态CSS文件（即在express应用程序中使用一个css样式文件来样式化ejs“模板”文件），下面是需要发生的简单的3个步骤：
1.将名为“styles.css”的css文件放在名为“assets”的文件夹中，并将assets文件夹放在名为“public”的文件夹中。因此，css文件的相对路径应为“/public/assets/styles.css”
1.在每个ejs文件的头部，你可以简单地用<link href=… />调用css文件（就像你在一个普通的html文件中所做的那样），如下面的代码所示，确保你把下面的代码直接复制并粘贴到你的ejs文件的<head>部分

<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />

1.在server.js文件中，您需要使用app.use()中间件。请注意，中间件只是一个术语，指的是在请求和响应操作之间运行的操作或代码。通过将方法放入中间件，该方法将在请求和响应方法之间每次自动调用。（例如css文件）在app.use()中间件中已经有express提供的函数/方法，称为express.static()。最后，你也需要指定一个请求路由，程序将响应并提供来自静态文件夹的文件每次中间件被调用。2因为你将把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'));

遵循这三个简单的步骤之后，每次你在你的app.get()方法中使用res.render('ejsfile')，你会自动看到css样式被调用，你可以通过在浏览器中访问你的路径来测试。

赞(0）回复(0）举报 2023-02-01

4xy9mtcn3#

你可以用这个

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

只构建样式. css

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

我在一些自定义css中尝试了这个，它对我很有效

赞(0）回复(0）举报 2023-02-01

uemypmqf4#

正如我所看到的，您正在使用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

赞(0）回复(0）举报 2023-02-01

guicsvcw5#

我尝试了一种不同的方法，我为我的样式创建了一个ejs文件，名为***styles.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>

对我来说效果很好。

赞(0）回复(0）举报 2023-02-01

6gpjuf906#

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

因此，文件夹结构应为：

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

赞(0）回复(0）举报 2023-02-01

我来回答

添加.css文件到ejs

6条答案

相关问题

热门标签

最新问答