Node.js + Express.js.如何减少css？

Question

我无法在快速工作区中渲染较少的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.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;
    }
}

这是我的好东西.没有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我从另一篇文章中听到@imports应该引用的.css不是.less.在任何情况下,我已经试过了组合开关.less用于.css在玉,少的文件,但没有成功.

如果您能提供帮助或有解决方案,我将非常感激.

注意: 如果我输入任何ol',玉部分工作正常.css.
注2:如果我通过命令行使用lessc,则编译得越少.

Answer 1

天哪,这些东西在路径的工作方式上非常不一致,但是我发现了如何让它发挥作用.

第一个问题是你的路,既compiler和staticProvider,编译器需要使用/public,是将钩到下面所有的请求.如果你不这样做,编译器将尝试使用类似的路径/public/stylo/stylo.

第二个问题在于@importin main.less文件以及较少的编译器是愚蠢的并且不处理相对导入的事实.

使用@import "/public/stylo/goodies.css";您的main.less将使其工作.

为相对路径问题提交了一个Bug less:https:
//github.com/cloudhead/less.js/issues/issue/177