在 expressjs 4.x 中将 less 文件编译为 css

Question

我想编译 expressjs 应用程序 public 文件夹中的 less 文件。

我使用的依赖是

"devDependencies": {
    "ejs": "^2.3.1",
    "express": "^4.10.6",
    "mysql": "^2.5.4"
  },
  "dependencies": {
    "less": "^2.5.1",
    "less-middleware": "^2.0.1"
  }

styles.less 文件中的内容

header {
    background-image: url('../img/bg.png');
    height: 380px;

    input#searchBox {
        width: 100%;
        height: 70px;
    }
}

服务器文件如下所示

var express = require('express'); // call express
var app = express(); // define our app using express
app.use(require('less-middleware')('public'));
// Public folder
app.use(express.static('public'));

less 文件在服务器上运行时没有被修改。

Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/css/styles.less
Request Method:GET
Status Code:304 Not Modified

这里有什么错误。

目录结构：

编辑：

header {
    background-image: url('../img/bg.png');
    height: 380px;
    #cloud-tag span {
        color: #fff;
        font-weight: 800;
        letter-spacing: 2px;
    }
    #cloud-tag_word_0 {
        font-size: 100px !important;
    }
}

我在 less 文件中添加了这个 css 并且它以相同的格式发送到浏览器而没有被编译。

Answer 1

看来您初始化中间件以表达的方式可能是问题所在。使用“__dirname + '/public'”来表示文件夹。

Answer 2

您必须请求 css 文件，而不是 less 文件，在您的情况下 http://localhost:3000/css/styles.css 而不是 http://localhost:3000/css/styles.less。中间件会将 less 文件编译为您请求的文件。

在 expressjs 4.x 中将 less 文件编译为 css

Compile less file to css in expressjs 4.x

less

node.js

express