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

Posted 2023-02-24

【中文标题】使用 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

【发布时间】：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;
    

【参考方案1】：

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

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