Webpack, less-loader - Unexpected token - Why?

Question

I'm using Webpack (in a Windows environment) and I'm trying to use less-loader and extract-text-webpack-plugin to generate a css file. I have less, webpack-core and webpack also in my node_modules folder.

In my app I use:

require('./index.less');

My Webpack config:

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

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

This is the error I'm getting:

ERROR in ./app/index.less

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 {

You may need an appropriate loader to handle this file type.

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

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

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

How can the less-loader have a problem with body {}..?

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

Answer 1

I was reviewing this page: https://webpack.github.io/docs/stylesheets.html in the excellent Webpack docs :-).

It shows: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader").

I tried this and it works! I get plain CSS in the output file.

I wasn't using ExtractTextPlugin.extract() correctly. The extract-text-webpack-plugin docs show that the first param is optional (the loader(s) that should be used when the css is not extracted), and the second param is loader string (the loader(s) that should be used for converting the resource to a css exporting module).