title: how to configure Ant Design with Webpack 3
body: <p><strong>Fix and solution:</strong></p>
  
  <p>Thanks to @BoyWithSilver, long story short, here are what I did to fix my problems:</p>
  
  <ol>
  <li>added .less into extensions section </li>
  <li>removed unnecessary codes in webpack.config.json e.g. removed the extract-text-webpack-plugin</li>
  <li>downgrade less from 3.0.1 to 2.7.0 fixed heaps of errors: length of undefined in index.less file in antd.</li>
  </ol>
  
  <hr>
  
  <p><strong>Update 3</strong></p>
  
  <p>Here is my package.json</p>
  
  <pre><code>{
    "name": "mobx-reactjsx",
    "version": "1.0.0",
    "description": dfsdfsdfsd",
    "scripts": {
      "start": "webpack-dev-server --config webpack.config.js --progress --inline",
      "lint": "eslint src"
    },
    "keywords": [
      "react",
      "reactjs",
      "boilerplate",
      "mobx",
      "starter-kit",
      "firebase",
      "re-base"
    ],
    "author": "Winston Fan",
    "license": "MIT",
    "homepage": "https://horizontalvision.azurewebsites.net/",
    "devDependencies": {
      "autoprefixer": "^8.0.0",
      "babel-core": "^6.9.1",
      "babel-loader": "^7.1.2",
      "babel-plugin-import": "^1.6.4",
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-preset-es2015": "^6.9.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-1": "^6.5.0",
      "css-loader": "^0.28.9",
      "extract-text-webpack-plugin": "^3.0.2",
      "less": "^3.0.1",
      "less-loader": "^4.0.5",
      "less-vars-to-js": "^1.2.1",
      "postcss-loader": "^2.1.0",
      "style-loader": "^0.20.2",
      "webpack": "^3.5.5",
      "webpack-dev-server": "^2.7.1"
    },
    "dependencies": {
      "antd": "^3.2.1",
      "firebase": "^4.9.1",
      "mobx": "^3.5.1",
      "mobx-react": "^4.4.1",
      "mobx-react-devtools": "^4.2.15",
      "re-base": "^3.2.2",
      "react": "^16.2.0",
      "react-dom": "^16.2.0"
    }
  }
  </code></pre>
  
  <hr>
  
  <p>Update 2:</p>
  
  <ol>
  <li><p>After removed the context option :
  // context: path.resolve(__dirname, 'dist'),
  in webpage.config.js</p></li>
  <li><p>added</p>
  
  <p>javascriptEnabled: true
  under less-loader in webpack.config.json</p></li>
  </ol>
  
  <p>I received these errors.</p>
  
  <blockquote>
    <p>ERROR in ./node_modules/antd/lib/button/style/index.less Module build
    failed:</p>
    
    <p>/* stylelint-disable
    declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read
    property 'length' of undefined
          in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
    (line 1, column -1)  @ ./node_modules/antd/lib/button/style/index.js
    5:0-23  @ ./src/index.js  @ multi
    (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js</p>
    
    <p>ERROR in ./node_modules/antd/lib/style/index.less Module build failed:</p>
    
    <p>/* stylelint-disable
    declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read
    property 'length' of undefined
          in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
    (line 1, column -1)  @ ./node_modules/antd/lib/button/style/index.js
    3:0-33  @ ./src/index.js  @ multi
    (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js</p>
    
    <p>ERROR in ./node_modules/antd/lib/style/index.less Module build failed:
    ModuleBuildError: Module build failed:</p>
    
    <p>/* stylelint-disable
    declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read
    property 'length' of undefined
          in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
    (line 1, column -1)
        at runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19)
        at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11
        at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18
        at context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
        at 
        at process._tickCallback (internal/process/next_tick.js:169:7)  @ ./node_modules/antd/lib/style/index.less  @
    ./node_modules/antd/lib/button/style/index.js  @ ./src/index.js  @
    multi (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js</p>
    
    <p>ERROR in ./node_modules/antd/lib/button/style/index.less Module build
    failed: ModuleBuildError: Module build failed:</p>
    
    <p>/* stylelint-disable
    declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read
    property 'length' of undefined
          in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
    (line 1, column -1)
        at runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19)
        at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11
        at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18
        at context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
        at 
        at process._tickCallback (internal/process/next_tick.js:169:7)  @ ./node_modules/antd/lib/button/style/index.less  @
    ./node_modules/antd/lib/button/style/index.js  @ ./src/index.js  @
    multi (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js
    Child extract-text-webpack-plugin
    node_modules/extract-text-webpack-plugin/dist
    node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/style/index.less:
           [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/style/index.less
    302 bytes {0} [built] [failed] [1 error]</p>
  
  <pre><code>ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/style/index.less
  Module build failed:
  
  /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
  ^
  Cannot read property 'length' of undefined
        in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
  </code></pre>
    
    <p>(line 1, column -1) Child extract-text-webpack-plugin
    node_modules/extract-text-webpack-plugin/dist
    node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/button/style/index.less:
           [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less
    302 bytes {0} [built] [failed] [1 error]</p>
  
  <pre><code>ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less
  Module build failed:
  
  /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
  ^
  Cannot read property 'length' of undefined
        in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
  </code></pre>
    
    <p>(line 1, column -1) webpack: Failed to compile.</p>
  </blockquote>
  
  <hr>
  
  <p>Update 1:</p>
  
  <p>Here is my webpack.config.json</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  const fs  = require('fs');
  
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  const lessToJs = require('less-vars-to-js');
  const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));
  
  module.exports = {
    watch: true,
    context: path.resolve(__dirname, './src'),
    devtool: 'source-map',
    entry: [
      './src/index.js'
    ],
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: '[name].bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new ExtractTextPlugin('style.css')
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    },
    module: {
      rules: [{
        test: /\.jsx?$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src')
      },
        {
          test: /\.less$/,
          use: ExtractTextPlugin.extract([
            {loader: "css-loader"},
            {loader: "less-loader",
              options: {
                modifyVars: themeVariables,
                root: path.resolve(__dirname, './')
              }
            }
          ])
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            use: "css-loader"
          })
        },]
    }
  };
  </code></pre>
  
  <p>now error message becomes:</p>
  
  <blockquote>
    <p>ERROR in multi (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>
    ./src/index.js Module not found: Error: Can't resolve './src/index.js'
    in '/Users/Winston/tmp/Playground/mobx-reactjsx/src'  @ multi
    (webpack)-dev-server/client?<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a> ./src/index.js</p>
  </blockquote>
  
  <p>(project structure)
  <a href="https://i.stack.imgur.com/yD9uD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yD9uD.png" alt="project structure"></a></p>
  
  <p>I do have index.js under projectfolder/src</p>
  
  <hr>
  
  <p>I'm trying to integrate Ant Design with Less support and the Import on Demand feature which is here:
  <a href="https://ant.design/docs/react/use-with-create-react-app" rel="nofollow noreferrer">https://ant.design/docs/react/use-with-create-react-app</a>
  in Advanced Guide section.</p>
  
  <p>In this section, it uses react-app-rewired but my project uses webpack 3(my project is based on this <a href="https://github.com/mobxjs/mobx-react-boilerplate" rel="nofollow noreferrer">https://github.com/mobxjs/mobx-react-boilerplate</a>), so cannot use the rewired command in my case.</p>
  
  <p>So I found another article:
  <a href="https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f" rel="nofollow noreferrer">https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f</a></p>
  
  <p>Here is my code:</p>
  
  <p>package.json</p>
  
  <pre><code>"start": "webpack-dev-server --hot --open",
  </code></pre>
  
  <p>webpack.config.json</p>
  
  <pre><code>const fs  = require('fs');
  
  const lessToJs = require('less-vars-to-js');
  const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));
  ....
  module:{
  .....
  rules:[
  .....
  test: /\.less$/,
  
  use: [
  
         {loader: "style-loader"},
  
         {loader: "css-loader"},
  
         {loader: "less-loader",
  
  options: {
  
  modifyVars: themeVariables
  
           }
  
         }
  
       ]
  ]
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import {Button} from 'antd';
  
  &lt;Button type="primary"&gt;Hi!&lt;/Button&gt;
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
  
  "presets": [
  
  "react",
  
  "es2015",
  
  "stage-1"
  
   ],
  
  "plugins": [
  
     ["import", {"libraryName": "antd", "style": true} ],
  
  "transform-decorators-legacy"
  
   ]
  
  }
  </code></pre>
  
  <p>Here is the error messages from console:
  <a href="https://i.stack.imgur.com/vrmfM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vrmfM.png" alt="enter image description here"></a></p>