title: How to have Babel in Webpack ignore .less files
body: <p>I am trying to load less files directly from node_modules, specifically the 'react-widgets' library. I set up a very simple example following the directions from <a href="http://jquense.github.io/react-widgets/docs/#/?_k=ehfr22" rel="nofollow noreferrer">their site</a>, into a <a href="https://github.com/petehunt/react-webpack-template" rel="nofollow noreferrer">basic template</a>. To my dismay I get the following error message:</p>
  
  <pre><code> D:\GitHub\react-webpack-template\node_modules\react-widgets\lib\less\react-widgets.less:1
   (function (exports, require, module, __filename, __dirname) { @import "./variables.less";
                                                                 ^
   SyntaxError: Unexpected token ILLEGAL
   at Object.exports.runInThisContext (vm.js:53:16)
   at Module._compile (module.js:513:28)
   at Object.Module._extensions..js (module.js:550:10)
   at Module.load (module.js:458:32)
   at tryModuleLoad (module.js:417:12)
   at Function.Module._load (module.js:409:3)
   at Module.require (module.js:468:17)
   at require (internal/module.js:20:19)
   at Object.&lt;anonymous&gt; (D:\GitHub\react-webpack-template\webpack.config.js:4:1)
   at Module._compile (module.js:541:32)
  </code></pre>
  
  <p>It's complaining about the @import at the start of the file. This is valid Less so I'm pretty sure it's Babel interfering, but I'm unsure how to get it to ignore my .less files.</p>
  
  <p>This is my webpack config</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>require('react-widgets/lib/less/react-widgets.less')
  
  module.exports = {
    entry: './index',
    output: {
      filename: 'browser-bundle.js'
    },
    devtool: 'source-map',
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
        { test: /\.gif$/, loader: "url-loader?mimetype=image/png" },
        { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]" },
      ]
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Similar SO responses that I've attempted but still left me scratching my head.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/36544545/webpack-less-loader-unexpected-token-why">attempting to use ExtractTextPlugin</a></li>
  <li><a href="https://stackoverflow.com/questions/33324435/how-to-ignore-non-js-files-with-babel-register">ignoring .less in the babelrc file</a></li>
  </ul>
  
  <p>What else should I try?</p>