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

Answer 1

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