title: Use webpack modifyVars to override ant design default.less variables in create-react-app using react app rewired
body: <p>I want to modify ant design <em>default.less</em> variables in my application that has been setup using create-react-app. I did not eject, but used react-app-rewired to modify inject custom webpack configurations. I am able to override most of the variable by following the <a href="https://ant.design/docs/react/use-with-create-react-app#Customize-Theme" rel="nofollow noreferrer">link</a>. I have the following directory structure:</p>
  
  <pre><code>--App
    |--config-overrides.js
    |--src
       |--styles
          |--styles.css
          |--(maybe include a .less file to achieve the purpose)
  </code></pre>
  
  <p><em>config-overrides.js</em></p>
  
  <pre><code>  const { injectBabelPlugin } = require('react-app-rewired');                  
    const { compose } = require('react-app-rewired');                            
    const rewireLess = require('react-app-rewire-less');                              
  
    module.exports = function override(config, env) {                            
      config = injectBabelPlugin(
        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],                                              
        config,                                                                  
      );
      config = rewireLess.withLoaderOptions({
        modifyVars: {
          '@ant-prefix' : 'ant',
  
          '@primary-color': '#006778', //works
  
          '@text-color': '#505050', //works
  
          //Not able to inject styles this way.     
          "@{ant-prefix}-divider-vertical { height: unset; }" //doesn't work                             
        },
        javascriptEnabled: true,                                                 
      })(config, env);
  </code></pre>
  
  <p>The app won't start with above when I add the last line in <code>modifyVars</code> object. I want to be able to override the antd classes like this.</p>
  
  <p><em>eg:</em></p>
  
  <pre><code>.@{ant-prefix}-btn-primary {
      &amp;:hover,
      &amp;:focus {
          background: @primary-color;
          color: #fff;
      }
  }
  </code></pre>