[英]Node.js + Express.js. How to RENDER less css?
我无法在快速工作区中渲染较少的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
的组合 ,没有成功。
如果您能提供帮助或有解决方案,我将非常感激。
注意:如果我输入任何.css
,玉部分工作正常。
注2:如果我通过命令行使用lessc,则编译得越少。
天哪,这些东西在路径的工作方式上非常不一致,但是我发现了如何让它发挥作用。
第一个问题是您的路径, compiler
和staticProvider
,编译器需要使用/public
,并且将挂钩到下面的所有请求。 如果你不这样做,编译器将尝试使用像/public/stylo/stylo
这样的路径。
第二个问题在于main.less
文件中的@import
以及较少的编译器是愚蠢的并且不处理相对导入的事实。
使用@import "/public/stylo/goodies.css";
在你的main.less
将使它工作。
为less
相对路径问题提交了一个Bug:
https://github.com/cloudhead/less.js/issues/issue/177
如果你想缩小输出的css,我发现内置的编译器(来自connect模块)缺少compress选项。 因此,而不是为它编写我自己的中间件编译器。 我在我的应用程序中覆盖了less less编译器。
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'] }));
问题是编译器只在文件更改时才编译文件。
让我们说你有:
// A.less
@import "B.css";
和
// B.less
body {
background: #f00;
}
我现在修改B.less
,A不会被重新编译!
我有一个拉请求等待几个月,你可以使用我的fork编译器而不是主编译器。
我在GitHub上发布了一个名为node-kickstart-example的软件包,它使用了一个方便的预配置表达式,启用了jade模板渲染和更少的样式表处理。 使用npm来安装kickstart ,将你的jade模板放在views/
和你的assets/styles/
较少文件中,你的好处就是......
用于生成压缩css文件的Matt Sain解决方案包含在kickstart中 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.