title: How to create a custom theme for Ant Design (React) in LESS using CodeSandbox?
body: <h1>Environment Setup</h1>
  
  <p>For ease of use, I've already completed the following steps: <a href="https://codesandbox.io/s/nice-leftpad-35ty9" rel="nofollow noreferrer">Here's a link to a sample project</a>.</p>
  
  <ol>
  <li>Head to <a href="https://codesandbox.io/s/" rel="nofollow noreferrer">CodeSandbox</a> (or use VSCode - making appropriate changes to these steps) and create a new project (I created a Vanilla  project)</li>
  <li>Add the following dependencies:
  
  <ul>
  <li><code>antd</code></li>
  <li><code>react</code></li>
  <li><code>react-dom</code></li>
  </ul></li>
  <li>Make the following file changes:</li>
  </ol>
  
  <h3>Update/Create <code>src/index.js</code></h3>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import "./styles.less";
  import App from "./App";
  
  const root = document.getElementById("app");
  ReactDOM.render(&lt;App /&gt;, root);
  </code></pre>
  
  <h3>Create <code>App.js</code></h3>
  
  <pre><code>import React from "react";
  
  class App extends React.Component {
    render() {
      return &lt;Button&gt;Test&lt;/Button&gt;;
    }
  }
  
  export default App;
  </code></pre>
  
  <h3>Rename/Create <code>styles.css</code> to <code>styles.less</code></h3>
  
  <pre><code>@import "~antd/dist/antd.less";
  
  body {
    font-family: sans-serif;
  }
  </code></pre>
  
  <hr>
  
  <h1>Problem</h1>
  
  <p>Now reload the codesandbox <em>Browser</em> tab for the project. It loads endlessly with the message <em>Transpiling Modules...</em> and going to the console shows the error:</p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined at n (less.js:10831)
  </code></pre>
  
  <hr>
  
  <h1>Ant Design</h1>
  
  <p>The Ant Design documentation states the following <a href="https://ant.design/docs/react/customize-theme#Customize-in-less-file" rel="nofollow noreferrer">here</a>:</p>
  
  <h3>Customize in less file</h3>
  
  <p>Another approach to customize theme is creating a less file within variables to override <code>antd.less</code>.</p>
  
  <pre><code>@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
  @import 'your-theme-file.less'; // variables to override above
  </code></pre>
  
  <p>Note: This way will load the styles of all components, regardless of your demand, which cause <code>style</code>option of <code>babel-plugin-import</code> not working.</p>
  
  <hr>
  
  <h1>Question</h1>
  
  <p>Is this issue pertaining to the <em>note</em> in the Ant Design documentation?</p>
  
  <p>How can I resolve this issue and override the Ant Design styles in LESS?</p>