17

Expressワークスペースでより少ないCSSをレンダリングできません。
これが私の現在の構成です（私のcss/lessファイルは'public/ stylo /'にあります）：

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'));
});

これが私の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

これが私のmain.lesscssです：

@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;
    }
}

そして、ここに私の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';
}

クールな取引。今：私はnpmを介してインストールを減らし.cssましたが、別の投稿から@importsはではなくを参照する必要があると聞いていました.less。いずれにせよ、私は翡翠と少ないファイルの切り替えの組み合わせを試しましたが、成功しませんでした。.less.css

あなたが助けたり、解決策を持ったりすることができれば、私はそれを大いに感謝します。

注： ol'を入力すると、ヒスイの部分は正常に機能します.css。
注2：コマンドラインからlesscを使用すると、lessはコンパイルされます。

4

5 に答える 5

16

おやおや、そのようなものはパスがどのように機能するかについて非常に一貫性がありません、しかし私はあなたがそれをどのように機能させることができるかを見つけました。

compiler最初の問題は、との両方のパスにありますstaticProvider。コンパイラは使用する必要があり、/publicその下のすべてのリクエストにフックします。そうしないと、コンパイラは。のようなパスを使用しようとします/public/stylo/stylo。

2番目の問題は、@importinmain.lessファイルと、より少ないコンパイラが愚かで相対的なインポートを処理しないという事実にあります。

で使用@import "/public/stylo/goodies.css";すると、機能しますmain.less。

https://github.com/cloudhead/less.js/issues/issue/177lessで相対パスの問題のバグを提出しました

于 2011-01-08T17:36:46.480 に答える
3

出力されたcssを縮小したい場合は、（接続モジュールからの）組み込みコンパイラにcompressオプションがないことがわかりました。したがって、独自のミドルウェアコンパイラを作成するのではなく。アプリのconnectlessコンパイラを上書きしました。

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'] }));
于 2011-12-04T23:48:21.140 に答える
1

問題は、コンパイラがファイルのmtimeが変更された場合にのみファイルをコンパイルすることです。

あなたが持っているとしましょう：

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

と

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

私は今変更B.lessします、Aは再コンパイルされません！

何ヶ月も待っているプルリクエストがあります。マスターコンパイラの代わりにフォークコンパイラを使用できます。

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

于 2011-01-10T16:25:55.747 に答える
0

GitHubでnode-kickstart-exampleというパッケージを公開しました。これは、ジェイドテンプレートのレンダリングが有効で、スタイルシートの処理が少ない、便利な事前構成済みのエクスプレスを使用しています。npmを使用してキックスタートをインストールし、jadeテンプレートを配置しviews/、ファイル数を減らして、準備完了assets/styles/…</ p>

少ない表現で圧縮されたcssファイルを生成するためのMattSainのソリューションは、キックスタートに含まれています。

于 2011-12-17T17:23:55.697 に答える