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

Question

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

使用以下问题作为指导:

1. 你要使用'less' 模块还是'less-middleware'模块？什么是官方/支持的方式？什么是优越的？
2. 您应该怎样目录结构中/public的样子？(你需要的任何特定文件夹？'styles'/'less'/'css'？还是由你自己决定？)
3. 如何配置有关目录结构的快速应用程序(来自问题2).(静态文件和编译器选项或更少中间件,这里的重要目录)
4. 如何从html 引用我的预编译样式表？(用.less或.css？什么引用类型？什么目录路径？)

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

Answer 1

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

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

1.中间件越来越少

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

2.目录结构:

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

3.应用配置:

您需要两个特定的东西来减少工作量:

首先,编译器编译较少的文件:

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

第二,show express在哪里可以找到静态文件!

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

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

4. html

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

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

5.较少的文件

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

更换 @import "reset.less"; 与 @import "/public/styles/reset.less"; 每一个进口你!

etvoilà... :-)

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