React18安装antd的按需引入配置

react安装最好使用 yarn 来安装插件,因为大部分使用npm时会出现各种错误

npm install yarn -g

切换并使用淘宝镜像:

yarn config set registry=https://registry.npm.taobao.org -g

在react版本16.8之前: 

yarn add react-app-rewired@2.1.6 customize-cra@1.0.0 babel-plugin-import@1.13.1 less@3.12.2 less-loader@7.1.0

并修改package.json文件

1.  
   "scripts": {
2.  
   "start": "react-app-rewired start",
3.  
   "build": "react-app-rewired build",
4.  
   "test": "react-app-rewired test",
5.  
   "eject": "react-scripts eject"
6.  
   },

在根目录下创建config-overrides.js

1.  
   //配置具体的修改规则
2.  
   const { override, fixBabelImports,addLessLoader} = require('customize-cra');
3.  
    
4.  
   module.exports = override(
5.  
     fixBabelImports('import', {
6.  
       libraryName: 'antd',
7.  
       libraryDirectory: 'es',
8.  
       style: true,
9.  
     }),
10.  
      addLessLoader({
11.  
        lessOptions:{
12.  
          javascriptEnabled: true,
13.  
          modifyVars: { '@primary-color': 'green' },
14.  
        }
15.  
      }),
16.  
    );

备注:不用在组件里亲自引入样式了, 即: import 'antd/dist/antd.min.css'应该删除

在React18版本后引入antd配合craco来设置

安装 @craco/craco 跟 babel-plugin-import

yarn add @craco/craco babel-plugin-import

将package.json文件修改为

1.  
   "scripts": {
2.  
   "start": "craco start",
3.  
   "build": "craco build",
4.  
   "test": "craco test",
5.  
   "eject": "react-scripts eject"
6.  
   },

此时在安装craco-less,并在根目录创建 craco.config.js文件

1.  
   /*
2.  
   注意:这边一定需要加上一个 --force, 否则会出现一个在 node_modules中会出现一个error
3.  
   错误是: 在tsconfig-paths中有个文件没有引入的错误, 使用npm i craco-less --force
4.  
   就没有以下问题
5.  
   */
6.  
   npm i craco-less --force

1.  
   const CracoLessPlugin = require("craco-less");
2.  
   // 需要安装两个插件：`yarn add craco-less` `yarn add babel-plugin-import` 从而实现样式的按需引入
3.  
   module.exports = {
4.  
   plugins: [
5.  
   {
6.  
   plugin: CracoLessPlugin,
7.  
   options: {
8.  
   lessLoaderOptions: {
9.  
   lessOptions: {
10.  
    modifyVars: { "@primary-color": "#1DA57A" },
11.  
    javascriptEnabled: true,
12.  
    },
13.  
    },
14.  
    },
15.  
    },
16.  
    ],
17.  
    babel: {
18.  
    //支持装饰器
19.  
    plugins: [
20.  
    [
21.  
    "import",
22.  
    {
23.  
    libraryName: "antd",
24.  
    libraryDirectory: "es",
25.  
    style: true, //设置为true即是less 这里用的是css，如果是scss，则需要设置为false，否则不能正常生效
26.  
    },
27.  
    ],
28.  
    ],
29.  
    },
30.  
    };

后面 npm start 或 yarn start 

附上我的package.json文件

1.  
   {
2.  
   "name": "react-admin_client",
3.  
   "version": "0.1.0",
4.  
   "private": true,
5.  
   "dependencies": {
6.  
   "@craco/craco": "^6.4.4",
7.  
   "@testing-library/jest-dom": "^5.16.4",
8.  
   "@testing-library/react": "^13.3.0",
9.  
   "@testing-library/user-event": "^13.5.0",
10.  
    "antd": "^4.21.5",
11.  
    "babel-plugin-import": "^1.13.5",
12.  
    "craco-less": "^2.0.0",
13.  
    "react": "^18.2.0",
14.  
    "react-dom": "^18.2.0",
15.  
    "react-scripts": "5.0.1",
16.  
    "web-vitals": "^2.1.4"
17.  
    },
18.  
    "scripts": {
19.  
    "start": "craco start",
20.  
    "build": "craco build",
21.  
    "test": "craco test",
22.  
    "eject": "react-scripts eject"
23.  
    },
24.  
    "eslintConfig": {
25.  
    "extends": [
26.  
    "react-app",
27.  
    "react-app/jest"
28.  
    ]
29.  
    },
30.  
    "browserslist": {
31.  
    "production": [
32.  
    ">0.2%",
33.  
    "not dead",
34.  
    "not op_mini all"
35.  
    ],
36.  
    "development": [
37.  
    "last 1 chrome version",
38.  
    "last 1 firefox version",
39.  
    "last 1 safari version"
40.  
    ]
41.  
    }
42.  
    }
43.  
     

这篇好文章是转载于：学新通技术网