title: Cannot load LESS into page with webpack
body: <p>I can't seem to load my <code>LESS</code> into my page using webpack</p>
  
  <p>Here is my <code>webpack.config.js</code></p>
  
  <pre><code>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&amp;optional=runtime'},
              { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&amp;optional=runtime'},
              { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") }
          ],
          plugins: [
              new ExtractTextPlugin('style.css', {
                  allChunks: true
              })
          ]
      }
  };
  </code></pre>
  
  <p>My <code>app/index.js</code> contains:</p>
  
  <pre><code>'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(&lt;Handler query={ state } path={ state.pathname }/&gt;, document.getElementById('app'))
  });
  </code></pre>
  
  <p><code>var stylesheet</code> should take all the <code>buttons.less</code> because it contains <code>@import "buttons.less";</code></p>
  
  <p>This is the <code>reactjs</code> component I am trying to load:</p>
  
  <pre><code>var React = require('react');
  var { RouteHandler } = require('react-router');
  
  var UserMenu = React.createClass({
  
      render() {
          return (
              &lt;div&gt;
                  &lt;div id="login-btn"&gt;
                      &lt;a href="/login"&gt;
                          &lt;button type="button" className="btn btn-embossed btn-primary"&gt;Login&lt;/button&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="signup-btn"&gt;
                      &lt;a href="/signup"&gt;
                          &lt;button type="button" className="btn btn-embossed btn-primary"&gt;Sign up&lt;/button&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  })
  
  var Layout = React.createClass({
      render() {
          console.log("layout props");
          console.log(this.props);
          return (
              &lt;div id="review-web"&gt;
                  &lt;header className="header"&gt;
                      &lt;UserMenu /&gt;
                  &lt;/header&gt;
                  &lt;div&gt;
                      &lt;RouteHandler path={ this.props.path } /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  });
  
  module.exports = Layout;
  </code></pre>
  
  <p>Project structure</p>
  
  <p><a href="https://i.stack.imgur.com/DJx2j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DJx2j.png" alt="enter image description here"></a></p>