I have this jade file:
!!! 5
html
head
title test include
style(type='text/css')
//- DOES NOT WORK!
include test.css
body
//- works
include test.css
div
//- works
include test.css
The output:
$ jade -P test.jade
rendered test.html
$ cat test.html
<!DOCTYPE html>
<html>
<head>
<title>test include</title>
<style type="text/css">
//- DOES NOT WORK!
include test.css
</style>
</head>
<body>body { color: peachpuff; }
<div> body { color: peachpuff; }
</div>
</body>
</html>
Of course, I could simply link the css-file, but I do not want to.
Any ideas out there? Thank you!
I didn't test it yet (not on my dev computer ATM) but there is a chance doing something like this could work :
!!!
head
title test include
| <style type='text/css'>
include test.css
| </style>
By the way, I found the HTML2Jade online converter but not the Jade2HTML. Any idea where to find it ?
From jade docs:
doctype html
html
head
style
include style.css
body
h1 My Site
p Welcome to my super lame site.
It works perfect.
Pass fs
in as data and you can
style !{fs.readFileSync("index.css").toString()}
In current version of Jade (0.35.0) it would be enough to write just include style.css
.
Complete example (considering you are writing index.jade, which is located in views
folder, whereas your styles are in assets
folder):
!!!
html
head
include ../assets/bootstrap3/css/bootstrap-theme.css
include ../assets/bootstrap3/css/bootstrap.css
body
h1 Hi!
Please note absence of style
tag in the template, it would inserted automatically by jade (what a nice feature!).
Arnaud’s answer worked for me, but I’ve since found this is a little cleaner:
doctype
head
title test include
style(type="text/css"): include test.css
The (type="text/css")
is optional, too, depending on your situation.
A possible solution would be:
style(type="text/css")
#{css}
And then pass the css-text in the res.render(...)
call.