Express.js + Less：如何正确配置

Question

我试过模块'less'和'less-middleware'。我尝试了所有教程中找到的所有不同的代码片段。没有可用的文档。有人可以解释如何配置Express.js和更少，以便更少的正确预编译？！

使用下列问题作为指导：

1. 您应该使用任一“少” 模块或“少的中间件”模块？什么是官方/支持的方式？什么是优越？
2. 你应该怎么样目录结构在/public的样子？ （您需要的任何特定文件夹？'style'/'less'/'css'？或者取决于您自己？）
3. 如何配置您的快速应用程序有关您的目录结构（来自问题2）。 （静态文件和编译器选项或更少的中间件，哪些目录是重要这里）从HTML
4. 如何参考我的预编译样式？ （与.LESS或.CSS？什么引用类型？什么目录的路径？）

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

Answer 1

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

我已经找到了解决方案，这种希望可以帮助别人：

---

1小于或更少的中间件

我用的少，因为我看过它是官方的端口。但不知道有什么区别，因为没有可用的文件。

2.目录结构：

你的目录结构不要紧少。但强烈建议使用公共文件夹来提供所有静态内容，如JavaScript，Less，CSS或图像文件。

3。应用程序配置：

你需要两个具体的事情，使更少的正常工作：

首先，编译器，该编译减档：

第二，节目表达在哪里可以找到静态文件！

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

双方应指向公共文件夹！

4. HTML

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

直接指向你的根少的文件，即位于公共文件夹的地方。

5.减档

感谢this答案，我知道错在哪里所有的时间。 less.js中有一种错误。它不会找到您在根文件中导入的所有较少的文件。所以你必须为每个导入添加正确的路径！

更换 @import "reset.less"; 与 @import "/public/styles/reset.less"; 每一个导入您！

等瞧... :-)

---

感谢对大家谁这个问题有帮助。也看看韦斯约翰逊的回答。我认为他有一个非常好的解决方案，不知何故不适合我...

Answer 2

我从未使用过少的中间件，但我我不确定这对大多数应用程序有多相关。大多数应该只是先编译，即：当你启动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'); 
     }); 
    }); 
}); 

的目录结构完全是自己的喜好。我将使用express.static来为编译的CSS文件提供服务。

Answer 3

每this answer (which I also worked on)。首先设置你的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); 

然后简单地包括除扩展名更改到css链接到less文件。像这样，

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

而且，这将编译components/bootstrap/less/bootstrap.less到CSS并将其提供给您的客户端。

查看docs on less-middleware了解更多关于如何自动缩小等酷类的信息。