ejs에 .css 파일을 추가

e.js와 함께 node.js (익스프레스)에서 작업중인 im은 .css 파일을 it.i에 포함 할 수 없기 때문에 html-css 듀오와 동일한 작업을 시도하고 정상적으로 작동했습니다. .. 내 .ejs 파일에 같은 것을 포함시킬 수 있습니다.ejs에 .css 파일을 추가

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 파일 : 내 app.js 따라서 간다

<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 파일 :

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

출처

2013-09-05 user-S

CSS 파일에서 스타일 태그를 사용해서는 안되며 CSS 및 기타 자산을 처리하는 express가있는 경로를 만들어야 할 수도 있습니다. –

귀하의 문제가 EJS 실제로 특정하지 않습니다.

2 가지 외부 CSS 파일 여기

있는 style.css에 유의합니다. 그래서 그 파일 안에 스타일 태그가 필요 없어요. 그것은 단지 CSS를 포함해야합니다.

익스프레스 앱에서는 정적 파일을 제공하는 공개 디렉토리를 언급해야합니다. CSS/JS/이미지처럼

은이 앱의 루트에서 공용 폴더에 CSS 파일을 넣어 가정

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

하여 수행 할 수 있습니다. 이제 내가 당신을 공용 폴더 안에 CSS 폴더에 CSS 파일을 넣어 가지고 가정 다음
<link href="/css/style.css" rel="stylesheet" type="text/css">

처럼, 당신의 tamplate 파일에 CSS 파일을 참조해야합니다.

그래서 폴더 구조가 될 것이다

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

출처

2013-09-05 10:25:33 mithunsatheesh

-1

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

그래서 폴더 구조가 있어야한다 :

이

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

출처

2017-07-20 13:34:54 Riyan

당신은 템플릿

에 넣어이

 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에 대해이 작업을 시도합니다. 그것은 나를 위해 작동

출처

2017-10-07 10:54:58

ejs에 .css 파일을 추가

답변

관련 문제