简体   繁体   English

表达较少的中间件无法编译

[英]Express less-middleware not compiling

Can someone please help me get my css compiling. 有人可以帮我编译css吗? I don't know why my view is not getting the compiled less 我不知道为什么我的观点没有得到较少的编译

Index.js Index.js

// MIDDLEWARE
var express = require('express');
var less = require('less-middleware');
var app = express();

// LESS COMPILER
app.use(less('source/less', {
  "dest": 'public/stylesheets',
  "pathRoot": __dirname,
  "force": true,
  "render": {
    "yuicompress": true
  }
}));

// APP CONFIG
app.use(express.static(__dirname + '/public'));
app.set('views', 'views')
app.set('view engine', 'jade');

// ROUTES
app.get('/', function (req, res) {
  res.render('index');
});

// PAGE NOT FOUND
app.use(function(req, res, next) {
  res.status(404).send('Sorry cant find that!');
});

// WEB SERVER
var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

Index.jade 索引玉

html
  head
    title Hello
    link(src="stylesheets/global.css" type="text/css")
  body
    h1 Welcome

You can read about how to set the src and dest dirs for your less-middleware to different directories at https://github.com/emberfeather/less.js-middleware/wiki/Examples . 您可以在https://github.com/emberfeather/less.js-middleware/wiki/Examples上了解有关如何将次要中间件的src和dest dirs设置到不同目录的信息。 But the upshot is this: To keep things relatively straightforward, the relative path of your source and dest must be identical. 但是结果是这样的:为了使事情相对简单,源和目的的相对路径必须相同。

I would recommend moving your less source files out of public to make this easier and because they're not supposed to be served as-is anyway. 我建议您将源文件较少的文件public以简化此过程,因为无论如何都不应按原样提供它们。

Create a less-src dir in the same directory that has your public directory. 在具有public目录的同一目录中创建一个less-src目录。 Inside less-src , create a stylesheets directory and put your global.less in there. less-src内部,创建一个stylesheets目录,然后将global.less放在该目录中。 Then change your less middleware use to this: 然后将您较少使用的中间件更改为此:

app.use(lessMiddleware(__dirname + '/less-src', 
    {dest: __dirname + '/public'}));

And that will work. 那将起作用。

If you dislike having a stylesheets directory in less-src , then you need to look at the material about preprocessing the less path at the the link above. 如果您不喜欢在less-src拥有一个stylesheets目录,那么您需要在上面的链接中查看有关预处理less路径的材料。 To me, that trades code complexity for very little gain in terms of source code layout. 对我来说,这在源代码布局方面以很少的收益换取了代码复杂性。 But if it seems worth it to you, then that's how you can do it. 但是,如果您觉得这值得,那么您就可以做到这一点。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM