Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include a css file in jade (without linking it)

Tags:

node.js

pug

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.

like image 399
user470370 Avatar asked May 15 '12 06:05

user470370


People also ask

What is Jade CSS?

Jade is an elegant templating engine, primarily used for server-side templating in NodeJS. In plain words, Jade gives you a powerful new way to write markup, with a number of advantages over plain HTML.

What is Jade HTML?

Jade is a template engine for node. js and the default rendering engine for the Express web framework. It is a new, simplified language that compiles into HTML and is extremely useful for web developers. Jade is designed primarily for server-side templating in node.


3 Answers

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.

like image 138
Fizer Khan Avatar answered Oct 16 '22 05:10

Fizer Khan


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 ?

like image 35
Arnaud Rinquin Avatar answered Oct 16 '22 07:10

Arnaud Rinquin


Pass fs in as data and you can

style !{fs.readFileSync("index.css").toString()}
like image 31
jpillora Avatar answered Oct 16 '22 05:10

jpillora