Question

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

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

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

Answer 1

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

您需要使用npm run eject弹出以控制webpack.config.js

然后您可以使用LESS的修改变量来更改主要颜色

正如指南解释

这是英文版：

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

Answer 2

如果您不想使用react-scripts弹出您可以简单地创建一个更少的文件（假设为main.less），导入antd.less并在此main.less文件中替换ant design的默认变量。

使用lessc（npm i -g less）编译较少的文件。

lessc“ main.less antd.css” --js --js是用于内联javascript的程序，现在只需在应用程序中包含这些已编译的CSS。

签出https://medium.com/@aksteps/782c53cbc03b以获得完整的演练

antd自定义原色

2 个答案:

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

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