Question

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

使用以下问题作为指导原则：

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

如果有人能回答这个问题会很好： - ）

Answer 1

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

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

<强> 1。或多或少中间件

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

<强> 2。目录结构：

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

第3。应用配置：

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

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

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

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

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

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

<强> 4。 html

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

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

<强> 5。较少的文件

感谢this回答我一直都知道出了什么问题。 less.js中有一种bug。它不会找到您在根文件中导入的所有文件。所以你必须为每次导入添加正确的路径!!!

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

etvoilà......： - ）

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

Answer 2

每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);

然后只需添加指向less文件的链接，只需将扩展名更改为css即可。像这样，

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

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

有关如何自动缩小内容等酷炫内容的详情，请参阅docs on less-middleware。

Answer 3

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

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

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

3 个答案: