Вопрос по pug, node.js – Как включить файл CSS в Jade (без ссылки на него)

10

У меня есть этот нефритовый файл:

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

Выход

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

Конечно, я могу просто связать css-файл, но я не хочу.

Я предполагаю, что вы хотите отделить CSS от HTML в файлах сервера, но предоставить стиль в html, чтобы избежать дополнительного запроса на получение CSS. Это неправильно: вы добавляете дополнительные вычисления (включение файла) для файла, который не будет запрашиваться каждый раз, потому что он будет кэшироваться. Arnaud Rinquin
Не думаю, что это возможно, но почему бы не простое решение? jsbeckr

Ваш Ответ

6   ответов
13

но есть шанс, что что-то подобное может сработать:

!!!
head
  title test include
  | <style type='text/css'>
  include test.css
  | </style>

Кстати, я нашел онлайн-конвертер HTML2Jade, но не Jade2HTML. Есть идеи, где его найти?

Я проверил, и это работает. Webthusiast
Спасибо, надеюсь, user470370 пометит его как ответивший;) Arnaud Rinquin
спасибо, работает! Я не знаю ни одного онлайн-конвертера. но сначала я нашел причину сбоя: «Теги, которые принимают только текст, такой как сценарий и стиль, не нуждаются в начальном | символе» Github.com / visionmedia / нефрит) user470370
9

От нефритовые документы:

doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.

Это отлично работает.

Пока это работает, я хочу добавить, что он равен коду в исходном вопросе, разница в версии (прошло 3 года). pzy
2

Проходятfs в качестве данных, и вы можете

style !{fs.readFileSync("index.css").toString()}
не совсем подходит для кросс-реализации, но, тем не менее, хороший взлом CoolAJ86
2

но с тех пор я обнаружил, что это немного чище:

doctype
head
  title test include
  style(type="text/css"): include test.css

The(type="text/css") тоже необязательно, в зависимости от вашей ситуации.

0

этого было бы достаточно, чтобы написать просто include style.css.

Полный пример (учитывая, что вы пишете index.jade, который находится вviews папка, а ваши стили вassets папка):

!!!
html
   head
       include ../assets/bootstrap3/css/bootstrap-theme.css
       include ../assets/bootstrap3/css/bootstrap.css
body
   h1 Hi!

Обратите внимание, отсутствиеstyle те в шаблоне, он будет вставлен автоматически с помощью Jade (какая замечательная особенность!).

Начиная с версии 1.0.0 (по крайней мере), похоже, это уже не так: если вы не укажете некоторые подробности, CSS просто будет дословно включен, а не в теге стиля Tim Perry
Вы должны включить тег стиля, он не будет добавлен автоматически. Nicekiwi
-1

Возможное решение будет:

style(type="text/css")
    #{css}

А затем передайте css-текст вres.render(...) вызов

Это ... это просто решение его проблемы, которого я совсем не понимаю. ;) jsbeckr
Я нахожу это очень и очень грязным: ты связываешь функционал и данные со стилем ... Arnaud Rinquin
Смотри мой комментарий о своей цели;) Arnaud Rinquin

Похожие вопросы