Question

我正在使用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，我需要采取哪些步骤？

Answer 1

我担心你的问题研究得不是很好。在发布问题之前，至少应阅读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。

Answer 2

如果您不打算使用弹出，则应使用config-overrides.js来指定如何修改默认脚本webpack.config.js，它是react-scripts的一部分。然后，一旦有了config-overrides，就可以添加较少的Rule，该规则中有一个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
}

Answer 3

如果您想在不使用react eject的情况下自定义antd，并且不想更改create-react-app或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

为create-react-app定制antd Less或Css

3 个答案: