paginas - agregando archivo.css a ejs
etiquetas css pdf (3)
Tu problema no es realmente específico de ejs.
2 cosas a tener en cuenta aquí
style.css es un archivo css externo. Entonces no necesitas etiquetas de estilo dentro de ese archivo. Solo debe contener el css.
En su aplicación express, debe mencionar el directorio público desde el que está publicando los archivos estáticos. Como css / js / image
se puede hacer por
app.use(express.static(__dirname + ''/public''));
suponiendo que coloque los archivos CSS en una carpeta pública en la raíz de su aplicación. ahora tiene que referirse a los archivos css en sus archivos tamplate, como
<link href="/css/style.css" rel="stylesheet" type="text/css">
Aquí supongo que has puesto el archivo css en la carpeta css dentro de tu carpeta pública.
Entonces la estructura de la carpeta sería
.
./app.js
./public
/css
/style.css
estoy trabajando en node.js (express) con ejs y no puedo incluir un archivo .css. Probé lo mismo por separado que un dúo html-css y funcionó bien ... ¿cómo puedo incluir el mismo en mi archivo .ejs Mi app.js dice así:
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);
y el archivo 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>
archivo 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>
app.use(express.static(__dirname + ''/public''));<link href="/css/style.css" rel="stylesheet" type="text/css">
Entonces la estructura de la carpeta debe ser:
.
./app.js
./public
/css
/style.css
Puedes usar esto
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
});
});
poner esto en la plantilla
<%- myCss.style %>
acaba de construir style.css
<style>
body {
background-color: #D8D8D8;
color: #444;
}
</style>
Intento esto para algunos css personalizados. Esto funciona para mi