Compiling less with webpack

Question

I want to add a very basic less file to my project on github (see this commit).

style.less

body {
  background-color: red;
}

webpack.config.js

{
    test: /\.less$/,
    loaders: ['style', 'css', 'less']
}

Command line build command

webpack --config webpack.config.js -d

Index.html

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

I expected the deployment folder to now contain bundle.css which contains the contents of my less file. This did not happen.

How do I setup webpack to compile my less?

Solution

A couple of things needed to be corrected:

1. Add require('./myPath/myFile.less') to your app.js (or entry point).

   The less file does not go in the index.html file.

2. You need a few dependencies. The versions I used are:

   "less": "^2.7.1",
   "less-loader": "^2.2.3",
   "style-loader": "^0.13.1",
   "css-loader": "^0.23.1",
   

Comments

[CharlesTWall3]

Re: #1 I am amazed this detail isn't in the docs. StackOverflow saves the day again. For those using typescript: stackoverflow.com/questions/44064890/…