node.js + express.js。如何减少CSS?
-
30-09-2019 - |
题
我无法在Express工作空间中渲染CSS。
这是我当前的配置 (我的CSS/更少的文件 在 '公共/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;
}
}
这是我的 糖果 :
.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: 如果我通过命令行使用LESEC,则编译较少。
解决方案
天哪,这些东西在路径的工作方式上非常不一致,但是我发现了如何使它起作用。
第一个问题是您的道路,两者都 compiler
和 staticProvider
, ,编译器需要使用 /public
并将涉足下面的所有请求。如果您不这样做,编译器将尝试使用类似的路径 /public/stylo/stylo
.
第二个问题在于 @import
在 main.less
文件和较少编译器的事实是愚蠢的,并且无法处理相对导入。
使用 @import "/public/stylo/goodies.css";
在你的 main.less
会使它起作用。
为相对路径问题提出错误 less
:
https://github.com/cloudhead/less.js/issues/issue/177
其他提示
如果要缩小输出的CSS,我发现内置编译器(来自连接模块)缺少压缩选项。因此,与其编写自己的中间件编译器。我覆盖了我的应用程序中的Connect少编译器。
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
, ,不会重新编译!
从几个月来开始,我就有一个拉动请求等待,您可以使用我的叉子编译器而不是主人。
我已经出版了 在GitHub上的包装,称为Node-kickstart-example 它使用方便的预配置Express和启用的Jade模板渲染和较少的样式表处理。使用NPM安装 Kickstart, ,将您的玉模板放入 views/
和您的文件更少 assets/styles/
而且你很好……
Matt Sain的解决方案用于生成较少和Express的压缩CSS文件的解决方案 Kickstart.