title: using less-loader in webpack
body: <p>I am creating a bundle.js file with webpack. I have decided I want to start using LESS as well and I have tried to add the less-loader as per the instructions:</p>
  
  <p><a href="https://github.com/webpack-contrib/less-loader" rel="nofollow noreferrer">https://github.com/webpack-contrib/less-loader</a></p>
  
  <p>I ran:
      npm-install  less-loader --save-dev</p>
  
  <p>Then I updated the webpack.config.js to include the rules:</p>
  
  <pre><code>module.exports = {
      entry: "./src/entry.js",
      output: {
          path: __dirname,
          filename: "./bundle.js",
          publicPath: "/"
      },
      module: {
      //******** BELOW IS THE RULES U ADDED *************/
          rules: [{
              test: /\.less$/,
              use: [{
                loader: 'style-loader' // creates style nodes from JS strings
              }, {
                loader: 'css-loader' // translates CSS into CommonJS
              }, {
                loader: 'less-loader' // compiles Less to CSS
              }]
          }],
           //******** ABOVE IS THE RULES U ADDED *************/
          rules: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  query: {
                      presets: ['es2015']
                  }
              }
          ],
          rules: [
              {
                test: /\.css$/,
                use: [
                  { loader: "style-loader" },
                  { loader: "css-loader" }
                ]
              },
              {
                  test: /\.(html)$/,
                  use: {
                    loader: 'html-loader',
                    options: {
                      attrs: [':data-src']                  
                    }
                  }
              }
          ]
      },
      devServer: {
          stats: 'errors-only'
      },
      stats: {
          colors: true
      },
      devtool: 'source-map'
  };
  </code></pre>
  
  <p>Then I added a less file and required it like so:
      require("./Bootstrap/bootstrap-iso.less");</p>
  
  <p>the less file is just a wrapper for bootstrap (I have also tried simplier css)</p>
  
  <pre><code>#entry {
      @import (less) './css/bootstrap.css';
    }
  </code></pre>
  
  <p>But I continue to get the following error:</p>
  
  <pre><code>ERROR in ./src/Bootstrap/bootstrap-iso.less
  Module parse failed: Unexpected character '#' (1:0)
  You may need an appropriate loader to handle this file type.
  | #entry {
  |     @import (less) './css/bootstrap.css';
  |   }
   @ ./src/entry.js 13:0-41
  </code></pre>
  
  <p>it seems that the loader is not loaded properly?</p>