Question

我想在已使用create-react-app设置的应用程序中修改ant设计 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;
    }
}

Answer 1

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

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

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

1 个答案: