1

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

4

3 回答 3

1

如果您不打算使用弹出，您应该使用 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
}
于 2018-06-29T21:21:25.140 回答
1

恐怕你的问题没有得到很好的研究。至少，请阅读明显的资源，例如https://ant.design/docs/react/use-with-create-react-app上的说明和旧的 Stackoverflow 问题（例如如何使用 .babelrc 获取 babel-plugin -import 为 antd 工作？）在发布问题之前。

目前，CRA 不支持更改 Babel 配置。这需要包含 antd babel-plugin，它是支持仅导入必要的 antd 模块所必需的。

因此，您只能在未弹出的 CRA 应用程序中导入整个单片 antd。

于 2017-06-19T15:51:33.853 回答
0

如果您想在不使用的情况下自定义 antdreact eject并且不想更改使用 fork 版本的create-react-appor react scriptsthen

您可以简单地创建一个 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

于 2020-04-20T21:31:45.927 回答