将.css文件添加到ejs | css文件添加到ejs

本文介绍了将.css文件添加到ejs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

工作在node.js（express）与ejs和im不能包括一个.css文件it.i尝试了相同的事情独立作为一个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 =stylesheettype =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对于您使用的模板语言是不可知的。模板语言可以是一个热门的辩论题目。我要使用Jade。< / p> 
< p class ='just'>再次Express对于您用来生成CSS的内容是不可知的 - 您可以使用vanilla CSS，但在这个例子中我使用Stylus。 
< / p> 
< footer> 
在具有express和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;} / *未访问链接* / 
a：visited {color：＃0B614B;} / *访问链接* / 
a：hover {color：＃B4045F;} / *鼠标悬停在链接上* / 
a：active {color：＃0000FF;} 
 
 ul {list-style-type：none; margin：0; padding：0; text-align：right; } 
 li {display：inline; } 
< / style>

解决方案

您的问题实际上不是ejs。 p>

这里需要注意的事情

style.css 是一个外部css文件。所以你不需要样式标签里面的文件。它应该只包含css。

在您的快速应用程序中，您必须提供从中提供静态文件的公共目录。像css / js / image

可以通过

来完成。

  app.use（express.static（__ dirname +'/ public'））;假设你将css文件放在你的应用程序根目录下的公共文件夹中，

现在你必须引用tamplate文件中的css文件，
like

 < link href =/ css / style.css =stylesheettype =text / css>

这里我假设你已将css文件放在css文件夹中。

所以文件夹结构是

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

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:

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:

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

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

解决方案

Your problem is not actually specific to ejs.

2 things to note here

style.css is 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

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

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

So folder structure would be

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

这篇关于将.css文件添加到ejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！