使用 webpack modifyVars 覆盖 create-react-app 中的 ant design default.less 变量，使用 rewired 的 react app答案

【问题标题】：Use webpack modifyVars to override ant design default.less variables in create-react-app using react app rewired使用 webpack modifyVars 覆盖 create-react-app 中的 ant design default.less 变量，使用 rewired 的 react app
【发布时间】：2019-06-16 04:26:03
【问题描述】：

我想修改已使用 create-react-app 设置的应用程序中的 ant design default.less 变量。我没有弹出，而是使用 react-app-rewired 来修改注入自定义 webpack 配置。我可以通过遵循link 来覆盖大部分变量。我有以下目录结构：

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

当我在modifyVars 对象中添加最后一行时，应用程序不会从上面开始。我希望能够像这样覆盖 antd 类。

例如：

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

【问题讨论】：

标签： reactjs webpack antd

【解决方案1】：

modifyVars 仅用于执行此操作。修改变量。更具体地说，default.less 中的变量。

你不能用它来注入这样的 CSS。您必须在自己的.css（或.less）文件中执行此操作，然后使用普通的import 命令将其导入应用程序。 (Import CSS in a react app)

【讨论】：