title: Importing bootstrap less in webpack
body: <p>I have followed examples from many different sources (including the less-loader usage examples) but I'm still having troubles importing bootstrap less code in a way I can customize it's variables elegantly.</p>
  
  <p>Here is my webpack config:</p>
  
  <p>webpackconfig.js</p>
  
  <pre><code>var path = require("path");
  
  module.exports = {
    entry: "./app/index.js",
    output: {
      filename: "./dist/bundle.js",
      path: __dirname
    },
   module: {
    rules: [
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader/url" },
            { loader: "file-loader" }
          ]
        },
        {
          test: /\.less$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "less-loader" }
          ]
        },
        { 
          test: /\.png$/, 
          use: [ { loader: "url-loader?limit=100000" } ]
        },
        { 
          test: /\.jpg$/, 
          use: [ { loader: "file-loader" } ] 
        },
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
          use: [ { loader: "url?limit=10000&amp;mimetype=application/font-woff" } ]
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
          use: [ { loader: "url?limit=10000&amp;mimetype=application/octet-stream" } ]
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
          use: [ { loader: "file" } ]
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
          use: [ { loader: "url?limit=10000&amp;mimetype=image/svg+xml" } ]
        },
        {
          test: /\.jsx?$/,
          use: [ { loader: "babel-loader" } ],
          exclude: /(node_modules|bower_components)/        
        }
      ]
  },
  
  node: {
    console: true,
    fs: "empty",
    net: "empty",
    tls: "empty"
  }
  
  };
  </code></pre>
  
  <p>Now in order to do the importing, I have tried two different approaches. By importing the bootstrap less directly like:  </p>
  
  <pre><code>import "bootstrap/less/bootstrap.less"
  </code></pre>
  
  <p>or by importing only my own less and then importing the bootstrap style in there like:</p>
  
  <pre><code>@import '~bootstrap/less/bootstrap.less';
  </code></pre>
  
  <p>In any case, here is my index.js:</p>
  
  <p>index.js</p>
  
  <pre><code>import _ from 'lodash'
  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
  import 'font-awesome/css/font-awesome.css'
  import styles from  './style/style.less'
  
  
  const app = document.getElementById("app")
  
  ReactDOM.render(
      &lt;App/&gt;,
      app
  )
  </code></pre>
  
  <p>In either approach, I get the following error:</p>
  
  <pre><code>Error: Module 'D:\code\ox\node_modules\url\url.js' is not a loader (must have normal or pitch function)
      at loadLoader
  </code></pre>
  
  <p>I should mention that I can import my own style.less just fine... </p>
  
  <p>Anyways, the repository for this code is real small and simple and is available <a href="https://github.com/Hookkid/oX" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I know this turned out to be quite a read... appreciate any help.</p>
  
  <p>Thanks!</p>