{"id":13725809,"url":"https://github.com/DocSpring/craco-antd","last_synced_at":"2025-05-07T21:30:29.200Z","repository":{"id":35088070,"uuid":"157279330","full_name":"DocSpring/craco-antd","owner":"DocSpring","description":"A craco plugin to use Ant Design with create-react-app","archived":false,"fork":false,"pushed_at":"2023-12-23T02:00:14.000Z","size":1825,"stargazers_count":233,"open_issues_count":36,"forks_count":47,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-20T07:39:48.488Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DocSpring.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-12T21:28:44.000Z","updated_at":"2025-01-28T07:40:33.000Z","dependencies_parsed_at":"2023-02-18T13:01:18.386Z","dependency_job_id":"f89792f9-7fe0-4a74-addc-cab90e50f742","html_url":"https://github.com/DocSpring/craco-antd","commit_stats":{"total_commits":119,"total_committers":13,"mean_commits":9.153846153846153,"dds":"0.15966386554621848","last_synced_commit":"712d63424159d5ba56f450f9c9ed8688394dcf99"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-antd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-antd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-antd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DocSpring%2Fcraco-antd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DocSpring","download_url":"https://codeload.github.com/DocSpring/craco-antd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251825382,"owners_count":21649945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:02:35.926Z","updated_at":"2025-05-07T21:30:28.872Z","avatar_url":"https://github.com/DocSpring.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/DocSpring/craco-antd.svg?branch=master)](https://travis-ci.org/DocSpring/craco-antd)\n[![Coverage Status](https://coveralls.io/repos/github/DocSpring/craco-antd/badge.svg?branch=master)](https://coveralls.io/github/DocSpring/craco-antd?branch=master)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n---\n\n### Community Maintained\n\nWe rely on your help to keep this project up to date and work with the latest versions of `craco` and `react-scripts`.\n\nBefore you send a PR, please check the following:\n\n- 100% test coverage\n\n```\njest --coverage --testPathIgnorePatterns test-app\n```\n\n- Code is formatted with Prettier\n\n```\nyarn prettier --write \"**/*.{js,jsx,json,css,scss,html,md,yml}\"\n```\n\n- No ESLint warnings\n\n```\nyarn eslint --fix --ext .js lib/\n```\n\n- No security vulnerabilities in any NPM packages\n\n```\nyarn audit\n```\n\nYou are also welcome to add your GitHub username to the [Contributors](#Contributors) section at the bottom of this README. (_optional_)\n\n### Please don't send a pull request if it does not meet the above requirements\n\nPull requests will be ignored and closed if there is a failing build on Travis CI.\n\n---\n\n# Craco Ant Design Plugin\n\nThis is a [craco](https://github.com/sharegate/craco) plugin that makes it easy to use the [Ant Design](https://ant.design/) UI library with [create-react-app](https://facebook.github.io/create-react-app/) version \u003e= 2.\n\n\u003e Use [react-app-rewired](https://github.com/timarney/react-app-rewired) for `create-react-app` version 1.\n\n`craco-antd` includes:\n\n- Less (provided by [craco-less](https://github.com/DocSpring/craco-less))\n- `babel-plugin-import` to only import the required CSS, instead of everything\n- An easy way to customize the theme. Set your custom variables in `./antd.customize.less`\n\n## Supported Versions\n\nThe latest version of `craco-antd` is tested with:\n\n- `react-scripts`: `^5.0.0`\n- `@craco/craco`: `^7.0.0`\n- `craco-less`: `^3.0.0`\n\n## Installation\n\nFirst, follow the beginning of the [Ant Design `create-react-app` Documentation](https://ant.design/docs/react/use-with-create-react-app) to set up your app with Ant Design.\n(Stop before the \"Advanced Guides\" section, because this plugin handles all of that for you.)\n\nThen, follow the [`craco` Installation Instructions](https://github.com/sharegate/craco/blob/master/packages/craco/README.md##installation) to install the `craco` package, create a `craco.config.js` file, and modify the scripts in your `package.json`.\n\nThen install `craco-antd` and `antd`:\n\n```bash\n$ yarn add craco-antd antd\n\n# OR\n\n$ npm i -S craco-antd antd\n```\n\n\u003e `craco-antd` only has a \"peer dependency\" for `antd \u003e= 3.0.0`. You should add `antd` to your own `package.json` and use a fixed version (e.g. `3.11.2`). Be careful when upgrading `antd`, because unexpected changes could break your application.\n\n## Basic Usage\n\nHere is a complete `craco.config.js` configuration file that sets up Less compilation and `babel-plugin-import` for `create-react-app`:\n\n```js\nconst CracoAntDesignPlugin = require(\"craco-antd\");\n\nmodule.exports = {\n  plugins: [{ plugin: CracoAntDesignPlugin }],\n};\n```\n\n## Advanced Usage\n\nHere is a production-ready `craco.config.js` file that sets up [`webpackbar`](https://github.com/nuxt/webpackbar) and [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer).\nIt also sets up [Preact](https://preactjs.com/) with the [`craco-preact`](https://github.com/DocSpring/craco-preact) plugin. (Preact is faster and smaller than React, and it works fine with Ant Design.)\n\nI put my custom theme variables in `src/style/AntDesign/customTheme.less`. I also use that folder for some custom components and other CSS.\n\n```javascript\nconst { BundleAnalyzerPlugin } = require(\"webpack-bundle-analyzer\");\nconst WebpackBar = require(\"webpackbar\");\nconst CracoAntDesignPlugin = require(\"craco-antd\");\nconst path = require(\"path\");\n\n// Don't open the browser during development\nprocess.env.BROWSER = \"none\";\n\nmodule.exports = {\n  webpack: {\n    plugins: [\n      new WebpackBar({ profile: true }),\n      ...(process.env.NODE_ENV === \"development\"\n        ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]\n        : []),\n    ],\n  },\n  plugins: [\n    { plugin: require(\"craco-preact\") },\n    {\n      plugin: CracoAntDesignPlugin,\n      options: {\n        customizeThemeLessPath: path.join(\n          __dirname,\n          \"src/style/AntDesign/customTheme.less\"\n        ),\n      },\n    },\n  ],\n};\n```\n\n\u003e See the [Reload Custom Variables During Development](#reload-custom-variables-during-development) section to wrap your \"start\" script with [`nodemon`](https://github.com/remy/nodemon).\n\n## Customize Ant Design Theme\n\nYou can modify the default Ant Design theme by changing some Less variables.\n\n`craco-antd` will look for variables in a Less file at `./antd.customize.less`. (You can customize this file path with the `customizeThemeLessPath` option.)\n\n```less\n// ./antd.customize.less\n@primary-color: #1da57a;\n@link-color: #1da57a;\n```\n\n\u003e [Here's a list of all the variables that can be modified.](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)\n\nYou can also customize these variables directly in your `craco.config.js` with the `customizeTheme` option:\n\n```js\nconst CracoAntDesignPlugin = require(\"craco-antd\");\n\nmodule.exports = {\n  plugins: [\n    {\n      plugin: CracoAntDesignPlugin,\n      options: {\n        customizeTheme: {\n          \"@primary-color\": \"#1DA57A\",\n          \"@link-color\": \"#1DA57A\",\n        },\n      },\n    },\n  ],\n};\n```\n\n\u003e `customizeTheme` is just an alias for the `modifyVars` option in `less-loader`.\n\nIf you use multiple options to customize the theme variables, they are merged together in the following order:\n\n- The file at `options.customizeThemeLessPath` (default: `./antd.customize.less`)\n- `options.customizeTheme`\n- `options.lessLoaderOptions.modifyVars`\n\n\u003e For more information, see Ant Design's [\"Customize Theme\" documentation](https://ant.design/docs/react/customize-theme).\n\n## Reload Custom Variables During Development\n\nThe webpack dev server needs to be restarted whenever you make a change to your custom theme variables. (It's not possible to reload this file automatically, because the variables are set in the webpack config. [I tried to fix this issue but hit a dead-end.](https://github.com/webpack-contrib/less-loader/pull/230#issuecomment-445466520))\n\nHowever, you can automatically restart webpack by wrapping `craco start` with [`nodemon`](https://github.com/remy/nodemon).\n\nInstall `nodemon`:\n\n```bash\nyarn add -D nodemon\n\n# Or globally (not recommended):\n\nnpm install -g nodemon\n```\n\nUpdate the \"start\" script in `package.json`:\n\n```json\n\"scripts\": {\n  \"start\": \"nodemon -w ./antd.customize.less --exec \\\"craco start\\\"\",\n}\n```\n\n\u003e (Change `./antd.customize.less` if you are using a different file.)\n\nThe webpack dev server will now be restarted whenever you make a change to `./antd.customize.less`.\n\n#### Restart Webpack When `craco.config.js` Changes\n\nWhile you're here, you can also add `-w craco.config.js` to restart webpack whenever your `craco` configuration changes (`craco` doesn't do this automatically):\n\n```json\n\"scripts\": {\n  \"start\": \"nodemon -w craco.config.js -w ./antd.customize.less --exec \\\"craco start\\\"\",\n}\n```\n\n## Disable \"Open In Browser\"\n\nBy default, `create-react-app` will open a new browser tab every time it starts. This can be really annoying, especially if you set up the `nodemon` watcher. You can [disable this behavior with an environment variable: `BROWSER=none`](https://facebook.github.io/create-react-app/docs/advanced-configuration).\n\nYou can set this in an `.env` file:\n\n```bash\nBROWSER=none\n```\n\nI prefer to set it at the top of `craco.config.js`:\n\n```javascript\n// Don't open the browser during development\nprocess.env.BROWSER = \"none\";\n```\n\n## Options\n\nYou can pass an `options` object to configure the loaders and plugins. You can also pass a `modifyLessRule` callback to have full control over the Less webpack rule.\nSee the [`craco-less`](https://github.com/DocSpring/craco-less#configuration) documentation for more information about these options:\n\n- `options.styleLoaderOptions`\n- `options.cssLoaderOptions`\n- `options.postcssLoaderOptions`\n- `options.lessLoaderOptions`\n- `options.miniCssExtractPluginOptions`\n- `options.modifyLessRule`\n\nSee the [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import#options) documentation for more information about this option:\n\n- `options.babelPluginImportOptions`\n\nExample:\n\n```js\nmodule.exports = {\n  plugins: [\n    {\n      plugin: CracoAntDesignPlugin,\n      options: {\n        lessLoaderOptions: {\n          modifyVars: { \"@primary-color\": \"#1DA57A\" },\n          strictMath: true,\n          noIeCompat: true,\n        },\n        cssLoaderOptions: {\n          modules: true,\n          localIdentName: \"[local]_[hash:base64:5]\",\n        },\n        babelPluginImportOptions: {\n          libraryDirectory: \"es\",\n        },\n      },\n    },\n  ],\n};\n```\n\n## Large Bundle Size from Ant Design Icons\n\nYou can use the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin to see a breakdown of all the JS and CSS in your webpack build. Here's how to add this plugin to your `craco.config.js` configuration file:\n\n```js\nconst { BundleAnalyzerPlugin } = require(\"webpack-bundle-analyzer\");\n\nmodule.exports = {\n  webpack: {\n    plugins: [new BundleAnalyzerPlugin()],\n  },\n  plugins: [{ plugin: require(\"craco-antd\") }],\n};\n```\n\nIf you have imported any icons from Ant Design, you will see a very large (\u003e 500KB) entry for `@ant-design/icons/lib`:\n\n\u003cimg src=\"https://github.com/DocSpring/craco-antd/raw/master/img/large-ant-design-icons-lib.png\" alt=\"Ant Design Large Icons\" width=\"500\"\u003e\n\nThis is a problem with Ant Design `v3.9.0+`, and it will be fixed in the next version. See [this GitHub issue](https://github.com/ant-design/ant-design/issues/12011) for more information. [This comment](https://github.com/ant-design/ant-design/issues/12011#issuecomment-433775872) talks about the fix, and here is [the PR](https://github.com/ant-design/ant-design/pull/12888).\n\nIn the meantime, you can [set up an import alias](https://github.com/ant-design/ant-design/issues/12011#issuecomment-423470708) and only include the required icons.\n\n## Further Configuration\n\nIf you need to configure anything else for the webpack build, take a look at the\n[Configuration Overview section in the `craco` README](https://github.com/sharegate/craco/blob/master/packages/craco/README.md#configuration-overview). You can use `CracoAntDesignPlugin` while making other changes to `babel` and `webpack`, etc.\n\n## Contributing\n\nInstall dependencies:\n\n```bash\n$ yarn install\n\n# OR\n\n$ npm install\n```\n\nRun tests:\n\n```\n$ yarn test\n```\n\nBefore submitting a pull request, please check the following:\n\n- All tests are passing\n  - Run `yarn test`\n- 100% test coverage\n  - Coverage will be printed after running tests.\n  - Check the coverage results in your browser: `open coverage/lcov-report/index.html`\n- No ESLint errors\n  - `yarn lint`\n- All code is formatted with [Prettier](https://prettier.io/)\n  - `yarn format`\n  - If you use VS Code, you should enable the `formatOnSave` option.\n\n## Test Application\n\nWe've included a test React application in this repo, under `./test-app`.\n\nInstall dependencies:\n\n```\ncd test-app\nyarn install\n```\n\nTest the app in development:\n\n```\nyarn start\n```\n\nTest the production build:\n\n```\nyarn build\n\n# Install the \"serve\" package\nyarn global add serve\n\n# Serve the production build\nserve -s build\n```\n\n## Releasing a new version\n\n- Make sure the \"Supported Versions\" section is updated at the top of the README.\n- Check which files will be included in the NPM package:\n  - `npm pack`\n  - Update `.npmignore` to exclude any files.\n- Release new version to NPM:\n  - `npm publish`\n\n## License\n\n[MIT](./LICENSE)\n\n## Contributors\n\n- [ndbroadbent](https://github.com/ndbroadbent)\n- [cemremengu](https://github.com/cemremengu)\n- [patricklafrance](https://github.com/patricklafrance)\n- [kovyazin](https://github.com/kovyazin)\n- [Vovan-VE](https://github.com/Vovan-VE)\n- [pybuche](https://github.com/pybuche)\n- [aitsvet](https://github.com/aitsvet)\n- [daniel-hauser](https://github.com/daniel-hauser)\n- [kamronbatman](https://github.com/kamronbatman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDocSpring%2Fcraco-antd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDocSpring%2Fcraco-antd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDocSpring%2Fcraco-antd/lists"}