Node.js + express.js. Comment rendre moins css?

StackOverflow https://stackoverflow.com/questions/4618257

Question

Je suis incapable de rendre moins dans mon espace de travail css express.
Voici ma configuration actuelle (mon css / moins de fichiers sont 'public / stylosanthes /') : 

app.configure(function()
{
    app.set('views'      , __dirname + '/views'         );
    app.set('partials'   , __dirname + '/views/partials');
    app.set('view engine', 'jade'                       );
    app.use(express.bodyDecoder()   );
    app.use(express.methodOverride());
    app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']}));
    app.use(app.router);
    app.use(express.staticProvider(__dirname + '/public'));
});

Voici mon fichier main.jade : 

!!!
html(lang="en")
     head
         title Yea a title
         link(rel="stylesheet", type="text/css", href="/stylo/main.less")
         link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif")
         script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")
         script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js")
     body!= body

voici mon main.less css : 

@import "goodies.css";

body 
{
    .googleFont;
    background-color     :  #000000;
    padding              :  20px;
    margin               :  0px;

    > .header
    {
        border-bottom    :  1px solid #BBB;
        background-color :  #f0f0f0;
        margin           :  -25px -25px 30px -25px; /* important */
        color            :  #333;
        padding          :  15px;
        font-size        :  18pt;
    }
}

Et voici mon goodies.less css : 

.rounded_corners(@radius: 10px)
{    
    -moz-border-radius   :  @radius;
    -webkit-border-radius:  @radius;
    border-radius        :  @radius;
}
.shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999)
{
    -webkit-box-shadow   :  @rad1 @rad2 @rad3 @color;
    -moz-box-shadow      :  @rad1 @rad2 @rad3 @color;
    box-shadow           :  @rad1 @rad2 @rad3 @color;
}
.gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec)
{
    background-image     :  -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2));
    background-image     :  -moz-linear-gradient(@color1, @color2);
}
.googleFont
{
    font-family          :  'Droid Serif';
}

deal cool. Maintenant: J'ai installé moins par NPM et j'avais entendu d'un autre poste qui @imports doivent faire référence à l'.css pas .less. En tout cas, je l'ai essayé combinaisons de commutation .less pour .css dans le jade et moins de fichiers sans succès.

Si vous pouvez aider ou avoir la solution je serais très reconnaissants.

Remarque: La partie de jade fonctionne bien si j'entre une ol » .css
. Note2:. Les moins compiles si j'utilise lessc via la ligne de commande

Était-ce utile?

La solution

Mon Dieu, ce genre de choses est très inégale dans la façon dont les chemins travail, mais je trouve comment vous pouvez l'obtenir au travail.

Le premier problème est avec vos chemins, à la fois compiler et staticProvider, les besoins du compilateur à l'utilisation /public et accrochera dans toutes les demandes en dessous. Si vous ne le faites pas, le compilateur essaiera d'utiliser un chemin comme /public/stylo/stylo.

La seconde réside problème avec le @import dans le fichier main.less et le fait que moins compilateur est stupide et ne gère pas les importations par rapport.

Utilisation @import "/public/stylo/goodies.css"; dans votre main.less cela fera le travail.

a déposé un bogue pour le problème de chemin relatif avec less:
https://github.com/cloudhead/less.js/issues/issue/177

Autres conseils

Si vous voulez rapetisser le css en sortie, je trouve que le construit dans le compilateur (à partir du module de connexion) il manquait l'option de compression. Ainsi, plutôt que d'écrire mon propre compilateur middleware pour elle. Je réenregistrés le compilateur connexion moins dans mon application. 

var express = require('express');
var app = express.createServer();
var less;

express.compiler.compilers.less.compile = function (str, fn) {
    if (!less) less = require("less");                                                      
    try {
        less.render(str, { compress : true }, fn);
    } catch (err) {
        fn(err);
    }
};

app.use(express.compiler({ src: publicdir, enable: ['less'] }));

Le problème est que le compilateur ne compile que le fichier si son mtime est modifié.

Disons que vous avez: 

// A.less
@import "B.css";

et 

// B.less
body {
  background: #f00;
}

Je maintenant je modifie B.less, A ne sera pas recompilé!

J'ai une attente de demande de tirage depuis des mois, vous pouvez utiliser mon compilateur fourchette au lieu de celui de maître.

https://github.com/senchalabs/connect/pull/167

J'ai publié un paquet sur GitHub appelé nœud-Kickstart-exemple qui utilisations un express préconfiguré pratique avec modèle de jade activé rendu et moins de traitement de feuille de style. Utilisez NPM pour installer Kickstart , placez vos modèles de jade dans views/ et vos fichiers moins en assets/styles/ et votre bonne aller ...

La solution de Matt Sain pour générer des fichiers CSS compressés avec moins et expressément dans inclus dans kickstart .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top