web-dev-qa-db-fra.com

Comment utiliser la balise de style avec les modèles de jade?

Ce code de style a fonctionné pour moi il y a quelques mois. J'ai mis à jour le dernier package Jade NPM et maintenant, il ne fonctionne pas. Est-ce que certains peuvent m'aider avec la manière appropriée d'insérer un style dans un modèle Jade?

doctype 5
html(lang="en")
    head
        style(type='text/css')
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

Je reçois cette erreur à la fermeture}

unexpected text }
pug
58
MobileGuy

Il y a trois façons de mettre du texte dans vos balises en Jade

1. Mettez du texte juste après la balise, par exemple.

h1 Some header text

Et le résultat sera:

<h1>Some header text</h1>

2. Placez le texte en retrait sous la balise avec | par exemple.

p
    | Some text goes 
    | here

Et le résultat sera:

<p>Some text goes here</p>

3. Suffixez la balise avec un point et indentez votre texte ci-dessous (sans |) par exemple.

p.
    This way 3rd way of putting 
    text inside

Et le résultat sera:

<p>This way 3rd way of putting text inside</p>

Donc, sur la base de ce qui précède, l’approche que vous avez choisie (comme dans votre commentaire) est correcte (option).

doctype 5
html(lang="en")
    head
        style(type='text/css').
           .ui-title {
                margin: 0.6em 10% 0.8em !important;
            }

J'espère que cela aidera.

56
Tom

Cela a fonctionné pour moi:

style.
  body {
    background-color: {{themeColor}};
  }

Je l’ai compris de: https://github.com/mquandalle/meteor-jade/issues/102 où le message suggère d’utiliser "la notation par points"

62
Gene Bo

C'est la façon de le faire (version designer)

include [some-html-include-name].html

Ensuite, dans ce fichier d’inclusion, mettez votre balise style et vos styles

<style type="text/css">
/* your styles here */
2
yowainwright

Travaille pour moi dans un fichier jade

style(media='screen', type='text/css')
     @media (min-width: 1200px) {
        .container{
           max-width: 970px;
             }
          }
1
mcbjam