Hinzufügen von .css-Datei zu ejs

Ich arbeite an node.js (Express) mit ejs und ich bin nicht in der Lage, eine .css-Datei zu integrieren. Ich versuchte das gleiche separat als ein HTML-CSS-Duo und es hat gut funktioniert. ..wie kann ich das Gleiche in meine .ejs-Datei aufnehmen? Mein app.js geht so:Hinzufügen von .css-Datei zu 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);

und die index.ejs Datei:

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

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

Quelle

2013-09-05 user-S

Sie sollten nicht die Stil-Tags in Ihrer CSS-Datei verwenden, und Sie müssen möglicherweise Routen mit Express erstellen, die Ihre CSS und andere Assets dienen. –

Ihr Problem ist eigentlich nicht spezifisch für EJS.

2 Dinge hier zu beachten

style.css eine externe CSS-Datei ist. Sie brauchen also keine Stil-Tags in dieser Datei. Es sollte nur das CSS enthalten.
In Ihrer Express-App müssen Sie das öffentliche Verzeichnis angeben, aus dem Sie die statischen Dateien bereitstellen. Wie css/js/Bild

es kann durch

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

getan werden vorausgesetzt, Sie die CSS-Dateien von Ihrer App root in den öffentlichen Ordner. jetzt müssen Sie die CSS-Dateien in Ihren tamplate Dateien verweisen, wie

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

Hier Ich gehe davon aus Sie die CSS-Datei in Ihrem öffentlichen Ordner in CSS-Ordner abgelegt haben.

So Ordnerstruktur wäre

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

Quelle

2013-09-05 10:25:33 mithunsatheesh

-1

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

So sollte Ordnerstruktur sein:

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

Quelle

2017-07-20 13:34:54 Riyan

Sie diese verwenden können

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

diese auf Vorlage setzen

<%- myCss.style %>

nur bauen style.css

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

Ich versuche dies für einige benutzerdefinierte CSS. Es funktioniert für mich

Quelle

2017-10-07 10:54:58

Hinzufügen von .css-Datei zu ejs

Antwort

Verwandte Themen