Node.js + Express.js. Как RENDER меньше 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="#" onclick="location.href='http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif'; return false;")
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;
}
}
И вот мой 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';
}
Прохладная сделка. Теперь: Я установил меньше через npm, и я слышал из другого сообщения, что @imports должен ссылаться на .css
не на .less
. В любом случае я попытался использовать комбинации для переключения .less
для .css
в нефрите и меньше файлов без успеха.
Если вы можете помочь или получить решение, я бы очень признателен.
Примечание: Часть нефрита отлично работает, если я ввожу любой ol '.css
.
Примечание2: Менее компилируется, если я использую lessc через командную строку.
Ответы
Ответ 1
Гоша, этот материал очень несовместим с тем, как работают пути, однако я узнал, как вы можете заставить его работать.
Первая проблема связана с вашими путями: compiler
и staticProvider
, компилятор должен использовать /public
и будет подключаться ко всем запросам ниже этого. Если вы этого не сделаете, компилятор попытается использовать путь, например /public/stylo/stylo
.
Вторая проблема заключается в файле @import
in main.less
и в том, что меньше компилятора глупо и не обрабатывает относительный импорт.
Использование @import "/public/stylo/goodies.css";
в вашем main.less
сделает его работу.
Подано сообщение об ошибке относительного пути с помощью less
:
https://github.com/cloudhead/less.js/issues/issue/177
Ответ 2
Если вы хотите минимизировать вывод css, я обнаружил, что встроенный компилятор (из модуля подключения) не имеет опции сжатия. Поэтому вместо написания моего собственного промежуточного компилятора для него. Я перезаписал компилятор подключения меньше в своем приложении.
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'] }));
Ответ 3
Проблема заключается в том, что компилятор только компилирует файл, если его mtime изменено.
Допустим, у вас есть:
// A.less
@import "B.css";
и
// B.less
body {
background: #f00;
}
Теперь я изменяю B.less
, A не будет перекомпилирован!
У меня есть запрос на растяжение, ожидающий с нескольких месяцев, вы можете использовать мой компилятор fork вместо основного.
https://github.com/senchalabs/connect/pull/167
Ответ 4
Два проекта, которые могли бы облегчить вам жизнь
Ответ 5
Я опубликовал пакет на GitHub, названный node -kickstart-example, который использует удобный предварительно сконфигурированный экспресс с включенным шаблоном нефрита рендеринг и меньше обработки таблиц стилей. Используйте npm для установки kickstart, поместите свои нефритовые шаблоны в views/
и ваши меньше файлов в assets/styles/
и ваш товар будет полезен...
Решение Matt Sain для создания сжатых css файлов с меньшим количеством и выражением включено в kickstart.