Webpack, less-loader - Unexpected token - Why?
<p>I'm using Webpack (in a Windows environment) and I'm trying to use <code>less-loader</code> and <code>extract-text-webpack-plugin</code> to generate a css file. I have <code>less</code>, <code>webpack-core</code> and <code>webpack</code> also in my <code>node_modules</code> folder.</p>

<p>In my app I use:</p>

<pre><code>require('./index.less');
</code></pre>

<p>My Webpack config:</p>

<pre><code>const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: path.join(__dirname, '/public'),
        filename: "js/app.js"
    },
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
            include: path.join(__dirname, '/app'),
            exclude: path.join(__dirname, '/node_modules'),
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react'],
                plugins: ["transform-object-rest-spread"]
            }
        },{
            test: /\.(css|less)$/,
            loader: ExtractTextPlugin.extract("css-loader", "less-loader")
        }]
    },
    plugins: [
        new ExtractTextPlugin('css/app.css')
    ]
};
</code></pre>

<p>From my understanding, this should mean that when Webpack comes across my <code>index.less</code> file, it uses <code>less-loader</code> first to generate CSS, then <code>css-loader</code> to drop the contents into the export file (<code>css/app.css</code> in this case).</p>

<p>This is the error I'm getting:</p>

<blockquote>
  <p>ERROR in ./app/index.less</p>
  
  <p>Module build failed: ModuleParseError: Module parse failed: c:\node\react2\node_modules\less-loader\index.js!c:\node\react2\app\index.less Line 1: Unexpected token {</p>
  
  <p>You may need an appropriate loader to handle this file type.</p>
  
  <p>| body { |   color: #333; |   background-color: #f5f5f5;
      at DependenciesBlock. (c:\node\react2\node_modules\webpack\lib\NormalModule.js:113:20)
      at DependenciesBlock.onModuleBuild (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
      at nextLoader (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
      at c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
      at context.callback (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14)
      at c:\node\react2\node_modules\less-loader\index.js:70:3
      at c:\node\react2\node_modules\less\lib\less\render.js:35:17
      at c:\node\react2\node_modules\less\lib\less\parse.js:63:17
      at Object.finish [as _finish] (c:\node\react2\node_modules\less\lib\less\parser\parser.js:183:28)
      at Object.ImportVisitor._onSequencerEmpty (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:35:14)
      at ImportSequencer.tryRun (c:\node\react2\node_modules\less\lib\less\visitors\import-sequencer.js:50:14)
      at Object.ImportVisitor.run (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:29:25)
      at Object.Parser.parse (c:\node\react2\node_modules\less\lib\less\parser\parser.js:189:22)
      at Object.parse (c:\node\react2\node_modules\less\lib\less\parse.js:61:18)
      at Object.render (c:\node\react2\node_modules\less\lib\less\render.js:25:18)
      at Object.module.exports (c:\node\react2\node_modules\less-loader\index.js:62:7)</p>
</blockquote>

<p>So the <code>less-loader</code> has a problem at line 1. My LESS code is very simple:</p>

<pre><code>body {
    color: #333;
    background-color: #f5f5f5;
    margin: 0;
    padding: 2% 5%;
    text-align: center;
    font-family: arial;
    font-size: 1em;
    p {
        margin: 0 0 1em 0;
        padding: 0;
    }
}
</code></pre>

<p>How can the <code>less-loader</code> have a problem with <code>body {}</code>..?</p>

<p><strong>UPDATE</strong>: If I add <code>style-loader</code> like this: <code>ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader")</code>, the error goes away, but the resulting CSS file contains LESS - as in - the nesting is still there: <code>body { p {} }</code> instead of <code>body {} body p {}</code>.</p>