I am unable to render less css in my express workspace.
Here is my current configuration (my css/less files are in '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 :
!!!
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 :
@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 :
.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 npm and I had heard from another post that @imports should reference the .css
not the .less
. In any case, I have tried the combinations of switching .less
for .css
in the jade and less files with no success.
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.
Most likely you need to compile you're Less Files into CSS. You can do this manually, or with a task runner like Gulp. If you already have compiled the file, it could be that the compiled css file is cached in the browser and the browser cache needs to be cleared.
Create a stylesheet with . less extension and link it in your document using the rel="stylesheet/less" attribute. You are all set and can compose styles within the . less .
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 compiler
and staticProvider
, compiler needs to use /public
and 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
.
The second problem lies with the @import
in main.less
file and the fact that less compiler is stupid and does not handle relative imports.
Using @import "/public/stylo/goodies.css";
in your main.less
will make it work.
Filed a Bug for the relative path issue with less
:
https://github.com/cloudhead/less.js/issues/issue/177
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.
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'] }));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With