Используйте webpack modifyVars, чтобы переопределить переменные ant design default.less в create-реагировать на приложение, используя перестроенное приложение реакции

Question

Я хочу изменить переменную ant design default.less в моем приложении, которое было настроено с помощью create-Reaction-app. Я не извлекал, но использовал response-app-rewired для изменения пользовательских настроек webpack. Я могу переопределить большую часть переменной, перейдя по ссылке . У меня следующая структура каталогов:

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

конфиг-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.( Импорт CSS в приложении реакции )