Use webpack modifyVars to override ant design default.less variables in create-react-app using react app rewired

Question

I want to modify ant design default.less 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 link. I have the following directory structure:

--App
  |--config-overrides.js
  |--src
     |--styles
        |--styles.css
        |--(maybe include a .less file to achieve the purpose)

config-overrides.js

  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);

The app won't start with above when I add the last line in modifyVars object. I want to be able to override the antd classes like this.

eg:

.@{ant-prefix}-btn-primary {
    &:hover,
    &:focus {
        background: @primary-color;
        color: #fff;
    }
}

Jesper We Jesper We · Accepted Answer · 2019-01-22T19:28:52

modifyVars is only used to do exactly that. Modify variables. More specifically the variables in default.less.

You can't use it to inject CSS like that. This you will have to do in your own .css (or .less) file that you import into the app with a normal import command. (Import CSS in a react app)

Use webpack modifyVars to override ant design default.less variables in create-react-app using react app rewired

1 Answers