antd 自定义原色答案

【问题标题】：antd custom primary colorantd 自定义原色
【发布时间】：2018-07-30 17:23:20
【问题描述】：

我正在使用 antd 和 create-react-app 来创建我的应用程序。

我按照这个例子：https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

这里他们给出了使用 webconfig 的例子。当我尝试替换相同的内容时，我无法更改原色。任何人都可以告诉如何在 create-react-app 中做同样的事情吗？

【问题讨论】：

标签： webpack ecmascript-6 create-react-app antd

【解决方案1】：

第一种方式手动弹出 create-react-app

你需要使用 npm run eject 弹出来控制 webpack.config.js

那么你可以使用LESS的modifyvars来改变原色

正如指南解释的那样

这里是英文版：

https://ant.design/docs/react/customize-theme

https://github.com/webpack-contrib/less-loader#less-options

第二。使用 react-app-rewire-less

导入它并修改 config-overrides.js，如下所示。

$ yarn add react-app-rewire-less --dev
  const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
-   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);  // change importing css to less
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);
    return config;
  };

在此处查看更多信息：https://ant.design/docs/react/use-with-create-react-app

【讨论】：

谢谢@Kossel，它很有用，目前我正忙于其他工作，周末会尝试运行它

【解决方案2】：

如果你不想使用 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。

查看https://medium.com/@aksteps/782c53cbc03b 了解完整演练

【讨论】：