Javascript Node.js + Express.js。如何渲染更少的css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4618257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Node.js + Express.js. How to RENDER less css?
提问by Paden
I am unable to render less css in my express workspace.
Here is my current configuration (my css/less filesare in 'public/stylo/'):
我无法在我的快速工作区中渲染更少的 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'));
});
Here is my main.jade file:
这是我的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
here is my main.less css:
这是我的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;
}
}
AND here is my goodies.less css:
这是我的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';
}
Cool deal. Now: I have installed less via npmand I had heard from another post that @imports should reference the .cssnot the .less. In any case, I have tried the combinationsof switching .lessfor .cssin the jade and less files with no success.
很酷的交易。现在：我通过 npm 安装了 less，我从另一篇文章中听说@imports 应该引用而.css不是.less. 无论如何，我尝试了在 jade 和 less 文件中切换为的组合，但没有成功。.less.css
If you can help or have the solution I'd greatly appreciate it.
如果您能提供帮助或有解决方案，我将不胜感激。
Note:The jade portion works fine if I enter any ol' .css.
Note2:The less compiles if I use lessc via command line.
注意：如果我输入任何 ol' ，玉部分工作正常.css。
注2：如果我通过命令行使用lessc，则编译更少。
采纳答案by Ivo Wetzel
Gosh, that stuff is very inconsistent in how the paths work, however I found out how you can get it to work.
天哪，这些东西在路径的工作方式上非常不一致，但是我发现了如何让它工作。
The first problem is with your paths, both compilerand staticProvider, compiler needs to use /publicand is will hook into all requests below that. If you don't do that, the compiler will try to use a path like /public/stylo/stylo.
第一个问题是你的路径，compiler和staticProvider，编译器需要使用/public并且 is 将挂钩到它下面的所有请求。如果不这样做，编译器将尝试使用类似/public/stylo/stylo.
The second problem lies with the @importin main.lessfile and the fact that less compiler is stupid and does not handle relative imports.
第二个问题在于@importinmain.less文件以及 less 编译器是愚蠢的并且不处理相对导入的事实。
Using @import "/public/stylo/goodies.css";in your main.lesswill make it work.
使用@import "/public/stylo/goodies.css";您的main.less将使其工作。
Filed a Bug for the relative path issue with less:
https://github.com/cloudhead/less.js/issues/issue/177
为相对路径问题提交了一个错误less：https:
//github.com/cloudhead/less.js/issues/issue/177
回答by Matt Sain
If you want to minify the outputted css, I found that the built in compiler (from the connect module) was missing the compress option. So rather than writing my own middleware compiler for it. I overwrote the connect less compiler in my app.
如果您想缩小输出的 css，我发现内置编译器（来自连接模块）缺少 compress 选项。因此，与其为它编写我自己的中间件编译器。我在我的应用程序中覆盖了 connect 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'] }));
回答by masylum
The problem is that the compiler only compiles the file if its mtime is changed.
问题是编译器仅在其 mtime 更改时才编译文件。
Lets say you have:
假设你有：
// A.less
@import "B.css";
and
和
// B.less
body {
background: #f00;
}
I now I modify B.less, A will not be recompiled!
我现在我修改B.less，A不会被重新编译！
I have a pull request waiting since months, you can use my fork compiler instead of the master one.
我有一个拉请求等待了几个月，你可以使用我的 fork 编译器而不是 master 编译器。
回答by balupton
Two projects which could make your life easier
两个可以让你的生活更轻松的项目
回答by sbstjn
I've published a package on GitHub called node-kickstart-examplewhich uses a handy pre-configured express with enabled jade template rendering and less stylesheet processing. Use npm to install kickstart, place your jade templates in views/and your less files in assets/styles/and your good to go…
我在 GitHub 上发布了一个名为 node-kickstart-example的包，它使用一个方便的预配置 express，启用了 jade 模板渲染和更少的样式表处理。使用 npm 安装kickstart，将您的 jade 模板放入其中，views/并将您的 less 文件放入其中assets/styles/，一切顺利……
Matt Sain's solution for generating compressed css files with less and express is in included in kickstart.
Matt Sain 使用 less 和 express 生成压缩 css 文件的解决方案包含在kickstart 中。
