Express.js - Less Middleware -使用单独的文件夹时生成错误的路径



我使用默认的lessMiddleware设置,其中编译的 .css文件存储在与其 .less文件相同的文件夹中。

然后我切换到使用单独的文件夹为我的cssless文件,从那时起,我的.less文件不再被编译成.css(基本上路径都是错误的现在-检查在底部的调试日志)。我做错了什么?

目录结构:
  • 公共
    • 风格
        css
  • app.js

app.js:

app.use(lessMiddleware(__dirname + '/public/styles/less', {
    force: true,
    dest: __dirname + '/public/styles/css',
    debug: true
}));
app.use(express.static(__dirname + "/public"));
app.get('/', function(req, res, next) 
{
    res.render('index.ejs');
});

索引。ejs:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/styles/css/animations.css"/>
        <link rel="stylesheet" type="text/css" href="/styles/css/global.css"/>
        ........
        ............

Less Debug log:

  pathname : /styles/css/animations.css
  source : /Users/mothership/testapp/public/styles/less/styles/css/animations.less
  destination : /Users/mothership/testapp/public/styles/css/styles/css/animations.css
  pathname : /styles/css/global.css
  source : /Users/mothership/testapp/public/styles/less/styles/css/global.less
  destination : /Users/mothership/testapp/public/styles/css/styles/css/global.css

结果是解决方案如下(也许有一个更干净的,但我找不到它):

app.use(lessMiddleware(__dirname + '/public/styles/less', {
    force: true,
    dest: __dirname + '/public',
    debug: true,
    preprocess: {
        path: function(pathname, req) {
          return pathname.replace(/styles/css//, '');
        }
      }
}));

最新更新