我正在使用 create-react-app 作为入门工具包，并尝试使用 antd 组件库。
我似乎找不到自定义样式的方法（出于品牌推广目的）。文档似乎没有给出关于定制的明确指示。
文档链接：https://ant.design/docs/react/customize-theme
他们提出了两种方法来做到这一点：
1.使用theme属性。但这仅适用于 antd-init 或 dva-cli 样板，不适用于 create-react-app
2.覆盖Less变量。
现在要使这些选项中的任何一个都适用于 create-react-app 而没有 eject ，我需要采取哪些步骤？
【问题讨论】：
标签： reactjs redux less create-react-app antd
恐怕你的问题没有得到很好的研究。至少，在发布问题之前，请阅读 https://ant.design/docs/react/use-with-create-react-app 中的说明和较早的 Stackoverflow 问题（如 How do I use .babelrc to get babel-plugin-import working for antd?）等明显的资源。
目前，CRA 不支持更改 Babel 配置。这需要包含 antd babel-plugin，它是支持仅导入必要的 antd 模块所必需的。
因此，您只能在未弹出的 CRA 应用中导入整个单体 antd。
【讨论】：
eject 的情况下使这些选项中的任何一个适用于create-react-app 。我现在已经更新了这个问题。我阅读了文档，他们提到的所有步骤都建议 eject 。我的偏好是找到一种没有eject 选项的主题方法，因为稍后我可以灵活地更新react-scripts。
如果你不打算使用弹出，你应该使用 config-overrides.js 来指定你想如何修改作为 react-scripts 一部分的默认 webpack.config.js。然后，一旦你有一个配置覆盖，你可以添加一个更少的规则，它有一个 modifyVars 的选项。您可以在此处指定对 less 变量的任何更改。
function addLessRule(config, env)
{
const { getLoader, loaderNameMatches } = require("react-app-rewired");
const fileLoader = getLoader(
config.module.rules,
rule => loaderNameMatches(rule, 'file-loader')
);
const lessExtension = /\.less$/;
fileLoader.exclude.push(lessExtension);
const cssRules = getLoader(
config.module.rules,
rule => String(rule.test) === String(/\.css$/)
);
var lessModifyVars = {
'primary-color': '#990000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
'layout-header-background' : '#f0f2f5'
};
var lessLoaders = [
{ loader: 'style-loader'} ,
{ loader: 'css-loader' },
{ loader: 'less-loader', options: {
modifyVars: lessModifyVars
} }
];
lessRule = {
test : lessExtension,
use: lessLoaders,
}
config.module["rules"].push( lessRule );
return config
}
【讨论】：
如果你想在不使用react eject 的情况下自定义antd，并且不想更改使用create-react-app 或react scripts 的分叉版本，那么
你可以简单地创建一个less文件（比如说 main.less ），导入 antd.less 并在这个 main.less 文件中替换 ant design 的默认变量。
现在使用lessc (npm i -g less) 编译这个less 文件。
lessc "main.less antd.css" --js
--js 用于 less 中的内联 javascript 现在只需在您的应用中包含这些已编译的 css。
【讨论】：