title: Webpack 4 with Less and MiniCssExtractPlugin using entries
body: <p>I have following structure for styles in my application: </p>
  
  <p><strong>application</strong></p>
  
  <pre><code>- css/
     - bootstrap/
        - boostrap.less -&gt; has (@import "another.less")
        - another.less
     - common/
        - common.less
     - entries/
        - bootstrap.js -&gt; has (import style from "../bootstrap/bootstrap.less")
        - common.js -&gt; has (import common from "../common/common.less")
  </code></pre>
  
  <p>And now I need to create separate CSS-es from styles imported to entries bootstrap.js and common.js. </p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  {
      entry: {
          "boostrap": ["./css/entries/boostrap.js"]
      },
      module: {
          rules: [
              {
                  test: /\.(less)$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      "css-loader",
                      "less-loader"
                  ]
              }
          ]
      },
      plugins: [
          new MiniCssExtractPlugin({
              filename: "./css/[name].css"
          })
      ]
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
      "webpack": "^4.16.3",
      "webpack-cli": "^3.1.0",
      "css-loader": "^1.0.0",
      "less-loader": "^4.1.0",
      "mini-css-extract-plugin": "^0.4.1",
  }
  </code></pre>
  
  <p>When I run webpack I get error below:</p>
  
  <pre><code>Entrypoint boostrap = boostrap.js
      [0] multi ./css/entries/boostrap.js 28 bytes {0} [built]
      [1] ./css/entries/boostrap.js 48 bytes {0} [built]
      [2] ./css/bootstrap/bootstrap.less 1.41 KiB {0} [built] [failed] [1 error]
  
      ERROR in ./css/bootstrap/bootstrap.less
      Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
      ModuleParseError: Module parse failed: Unexpected character ' ' (1:0)
      You may need an appropriate loader to handle this file type.
  </code></pre>
  
  <p>Do you have any idea what's wrong? It looks like <code>bootstrap.less</code> thrown an error during import other less file, but I don't know why. </p>
  
  <p>Thanks</p>
  
  <p>Rafal </p>
  
  <p>PS: Similar issue is reported <a href="https://stackoverflow.com/questions/50326241/webpack-4-help-for-less-configuration">here</a>. </p>