Cannot load LESS into page with webpack

Question

I can't seem to load my LESS into my page using webpack

Here is my webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: './public/js',
        filename: 'main.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.jsx$/, loader: 'jsx-loader' },
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") }
        ],
        plugins: [
            new ExtractTextPlugin('style.css', {
                allChunks: true
            })
        ]
    }
};

My app/index.js contains:

'use strict';

let stylesheet = require('./styles/index.less');
let routes = require('./routes.js');
let Router = require('react-router');
let { Handler } = Router;

Router.run(routes, Router.HistoryLocation, function(root, state) {
    React.render(<Handler query={ state } path={ state.pathname }/>, document.getElementById('app'))
});

var stylesheet should take all the buttons.less because it contains @import "buttons.less";

This is the reactjs component I am trying to load:

var React = require('react');
var { RouteHandler } = require('react-router');

var UserMenu = React.createClass({

    render() {
        return (
            <div>
                <div id="login-btn">
                    <a href="/login">
                        <button type="button" className="btn btn-embossed btn-primary">Login</button>
                    </a>
                </div>
                <div id="signup-btn">
                    <a href="/signup">
                        <button type="button" className="btn btn-embossed btn-primary">Sign up</button>
                    </a>
                </div>
            </div>
        );
    }
})

var Layout = React.createClass({
    render() {
        console.log("layout props");
        console.log(this.props);
        return (
            <div id="review-web">
                <header className="header">
                    <UserMenu />
                </header>
                <div>
                    <RouteHandler path={ this.props.path } />
                </div>
            </div>
        )
    }
});

module.exports = Layout;

Project structure

Solution

You seem to be doing everything fine, except for loading the output from the ExtractTextPlugin into your HTML.

When you use ExtractTextPlugin, webpack it will bundle css, less in a separate bundle.css file which you have to manually load into your app. After you ran the webpack CLI from your console, you can expect to find this bundle in a folder inside your webpackConfig.output.path folder.

Normally I use ExtractTextPlugin only in production mode. In development mode, I simply use the style-loader, so I can take advantage of the hot-module-replacement and so I don't need to run the webpack CLI everytime I change styles (I know I could use the webpack-middleware, but I don't want to).

One of my dev webpack configs

One of my prod webpack configs

EDIT It was a typo on your index.less file. I fixed that for you on a pull request :)

EDIT 2 Ok, here's my last attempt:

Try to add this to your wepback config file:

{test: /\.css/, loader: 'style-loader!css-loader'},

Maybe, just maybe, the LESS loader outputs a temp CSS file that needs to be tested too. I don't know, I would try it.

Then, here's what I would do, in order to reduce to the minimum to test:

• Stop importing in the index.less. I mean, put everything in the index.less and see what happens.
• After you've added the CSS test.. Try replacing LESS by regular CSS, and see if that works.
• Try specifing a publicPath on your webpack config: https://github.com/webpack/docs/wiki/configuration