Compile less file to css in expressjs 4.x

Question

I want to compile the less file in public folder of expressjs application.

Dependencies which I am using are

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

Content in styles.less file

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

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

Server file looks like below

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

The less file is not modified while running it on server.

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

What is the error here.

Directory structure: enter image description here

Edit:

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;
    }
}

I added this css in less file and it is being sent to browser in same format without being compiled.

nodejs code "server,js" is inside the root folder...i.e. sibling of node_modules folder — ghost...
– ghost..., Commented Jun 5, 2015 at 17:30

Pierre Inglebert · Accepted Answer · 2015-06-06 15:14:22Z

7

+50

You must request the css file, not the less file, in your case http://localhost:3000/css/styles.css not http://localhost:3000/css/styles.less. The middleware will compile the less file to the one you requested.

edited Jun 6, 2015 at 15:14

answered Jun 6, 2015 at 10:39

Pierre Inglebert

3,9601 gold badge21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ghost... Over a year ago

it says Cannot GET /css/styles.css

Pierre Inglebert Over a year ago

I took your express code

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'));  app.listen(3000);

After that i created a directory public/css, in which i put style.less, now when i query http://localhost:3000/css/styles.css I get the compiled css...

Raghavan · Accepted Answer · 2015-06-03 16:37:02Z

3

Looks like the way you initilize the middleware to express might be the issue . Use "__dirname + '/public'" to denote the folder.

answered Jun 3, 2015 at 16:37

Raghavan

9231 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

Compile less file to css in expressjs 4.x

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related