表达。js + Less:如何正确配置

I tried modules 'less' and 'less-middleware'. I tried all the different code-snipplets I have found in all the tutorials. There is no documentation available. Can someone please explain how to configue Express.js and Less, so that less is getting precompiled properly?!

我尝试过模块“少”和“少中间件”。我尝试了在所有教程中找到的所有不同的代码片段。没有可用的文档。有人可以解释一下如何配置Express.js和Less，以便更少地进行预编译吗？！

Use the following questions as a guideline:

使用以下问题作为指导：

Shall you use either the 'less' module or the 'less-middleware' module? What is the official/supported way? What is superior?
你要使用'less'模块还是'less-middleware'模块？什么是官方/支持的方式？什么是优越的？
How should your directory-structure in /public look like? (any specific folders you need? 'styles'/'less'/'css'? or is it up to yourself?)
/ public中的目录结构应该如何？（你需要的任何特定文件夹？'styles'/'less'/'css'？还是由你自己决定？）
How to configure your express app regarding your directory-structure (from question 2). (static files and compiler options or less-middleware, what directories are important here)
如何配置有关目录结构的快速应用程序（来自问题2）。（静态文件和编译器选项或更少中间件，这里的重要目录）
How to reference my precompiled stylesheet from the html? (with .less or .css? what reference type? What directory-path?)
如何从html引用我的预编译样式表？（用.less或.css？什么引用类型？什么目录路径？）

Would be so nice if someone could answer that :-)

如果有人能回答这个问题会很好:-)

3 个解决方案

#1

This solution does only work for express 2.x.

此解决方案仅适用于express 2.x.

I have found a solution, this hopefully helps someone:

我找到了一个解决方案，这有希望帮助某人：

1. less or less-middleware

1.中间件越来越少

I am using less because I have read it is the official port. But not sure what the difference is since there is no documentation available.

我使用较少，因为我读过这是官方端口。但不确定有什么区别，因为没有可用的文档。

2. directory structure:

2.目录结构：

Your directory structure doesn't matter for less. But it is highly recommended to have a public folder that serves all the static content like JavaScript, , Less, CSS or Image files.

您的目录结构无关紧要。但强烈建议使用一个公共文件夹来提供所有静态内容，如JavaScript，Less，CSS或Image文件。

3. App config:

3.应用配置：

You need two specific things to make less working properly:

您需要两件具体的事情来减少工作：

First, the compiler, that compiles the less files:

首先，编译器编译较少的文件：

    app.use(express.compiler({ src : __dirname + '/public', enable: ['less']}));

And second, show express where to find the static files!

第二，show express在哪里可以找到静态文件！

    app.use(express.static(__dirname + '/public'));

Both should point to your public folder!

两者都应指向您的公用文件夹！

4. The html

4. html

    <link rel="stylesheet" href="/styles/bootstrap.css">

Point directly to your root-less file, that lies somewhere in your public folder.

直接指向您的无根文件，该文件位于公用文件夹中的某个位置。

5. The Less Files

5.较少的文件

Thanks to this answer I know what went wrong all the time. There is kind of a bug in less.js. It will not find all the less files that you import in your root file. So you have to add the correct path to every import!!!

多亏了这个答案，我知道出了什么问题。 less.js中有一种bug。它不会找到您在根文件中导入的所有文件。所以你必须为每次导入添加正确的路径！

Replace @import "reset.less"; with @import "/public/styles/reset.less"; for every import you have!

替换@import“reset.less”;与@import“/public/styles/reset.less”;对于你的每一次进口！

et voilà... :-)

etvoilà... :-)

Thank's to everyone who helped with this issue. Also have a look at Wes Johnson's answere. I think he has a very nice solution that somehow didn't work for me...

感谢所有帮助解决此问题的人。还可以看看Wes Johnson的回答。我认为他有一个非常好的解决方案，不知何故对我不起作用......

#2

Per this answer (which I also worked on). First configure your app.js,

根据这个答案（我也参与其中）。首先配置你的app.js，

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));

// This is just boilerplate you should already have
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);

Then simply include the link to the less file except change the extension to css. Like this,

然后只需包含指向less文件的链接，除了将扩展名更改为css。喜欢这个，

<link rel="stylesheet" href="components/bootstrap/less/bootstrap.css" />

And, that will compile components/bootstrap/less/bootstrap.less to css and serve it to your client.

并且，这会将components / bootstrap / less / bootstrap.less编译为css并将其提供给您的客户端。

See the docs on less-middleware for more information on how to do cool stuff like minify automatically.

有关如何自动缩小内容等更酷的内容的详细信息，请参阅less-middleware上的文档。

#3

I've never used less middleware, but I'm not sure how relevant that is for most applications. Most should probably just compile upfront, ie: when you start Node. Could be as simple as this:

我从来没有使用过较少的中间件，但我不确定它对于大多数应用程序有多重要。大多数应该只是预先编译，即：当你启动Node时。可以这么简单：

var fs      = require('fs'),
    less    = require('less');

fs.readFile('styles.less', function(err,styles) {
    if(err) return console.error('Could not open file: %s',err);
    less.render(styles.toString(), function(er,css) {
        if(er) return console.error(er);
        fs.writeFile('styles.css', css, function(e) {
            if(e) return console.error(e);
            console.log('Compiled CSS');
        });
    });
});

The directory structure is entirely your preference. I would make use of express.static in serving the compiled CSS file.

目录结构完全是您的首选。我会使用express.static来提供编译的CSS文件。

#1