16

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

使用以下问题作为指导：

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

如果有人能回答，那就太好了:-)

4

3 回答 3

12

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

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

1.less or less-middleware

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

2.目录结构：

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

3.应用配置：

您需要两个特定的东西来减少正常工作：

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

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

其次，显示在哪里可以找到静态文件！

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

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

4.html

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

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

5. 更少的文件

感谢这个答案，我一直知道出了什么问题。less.js 中存在某种错误。它不会找到您在根文件中导入的所有较少文件。所以你必须为每个导入添加正确的路径！！！

替换 为您@import "reset.less"; 拥有 @import "/public/styles/reset.less"; 的每个导入！

等等... :-)

感谢所有帮助解决此问题的人。也看看韦斯约翰逊的回答。我认为他有一个非常好的解决方案，但不知何故对我不起作用......

于 2012-06-12T08:55:59.230 回答
4

根据这个答案（我也做过）。首先配置你的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);

然后只需包含指向less文件的链接，但将扩展名更改为css. 像这样，

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

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

有关如何执行诸如自动缩小等很酷的事情的更多信息，请参阅文档。less-middleware

于 2013-04-19T09:10:53.090 回答
2

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

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 文件时使用。

于 2012-06-08T18:49:02.237 回答