Craco Antd 插件使用教程

Craco Antd 插件使用教程

craco-antdA craco plugin to use Ant Design with create-react-app项目地址:https://gitcode.com/gh_mirrors/cr/craco-antd

项目介绍

Craco Antd 是一个用于简化在 Create React App (CRA) 项目中集成 Ant Design 的插件。它允许开发者在不弹出配置的情况下，自定义 Ant Design 的主题和按需加载样式，从而提高开发效率和项目可维护性。

项目快速启动

安装依赖

首先，确保你已经有一个使用 Create React App 创建的项目。然后，安装必要的依赖：

npm install @craco/craco craco-antd antd

配置 Craco

在项目根目录下创建 craco.config.js 文件，并添加以下内容：

const CracoAntDesignPlugin = require('craco-antd');

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#1DA57A',
        },
      },
    },
  ],
};

修改 package.json

修改 package.json 中的脚本部分，使用 craco 替代 react-scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

启动项目

现在，你可以启动项目并看到 Ant Design 的样式已经生效：

npm start

应用案例和最佳实践

自定义主题

通过 craco.config.js 文件中的 customizeTheme 选项，你可以轻松自定义 Ant Design 的主题颜色和其他样式变量。例如，修改主色调为绿色：

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#1DA57A',
        },
      },
    },
  ],
};

按需加载样式

使用 babel-plugin-import 插件可以实现 Ant Design 组件的按需加载，减少打包体积：

npm install babel-plugin-import

然后在 craco.config.js 中添加配置：

module.exports = {
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
    ],
  },
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          '@primary-color': '#1DA57A',
        },
      },
    },
  ],
};

典型生态项目

Craco Less 插件

Craco Less 插件是另一个与 Craco Antd 配合使用的插件，它允许你在项目中使用 Less 预处理器，并进一步自定义样式：

npm install craco-less

在 craco.config.js 中添加配置：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

通过这些配置，你可以在项目中灵活使用 Ant Design 和 Less，实现高度定制化的前端开发。

craco-antdA craco plugin to use Ant Design with create-react-app项目地址:https://gitcode.com/gh_mirrors/cr/craco-antd