React教程 第5章：antd组件库

11 min read

antd的按需引入

  1. 安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

  2. 修改package.json

​

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"

}

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

//配置具体的修改规则

const { override, fixBabelImports,addLessLoader} = require('customize-cra');

module.exports = override(

  fixBabelImports('import', {

     libraryName: 'antd',

     libraryDirectory: 'es',

     style: true,

 }),

addLessLoader({

    lessOptions:{

    javascriptEnabled: true,

     modifyVars: { '@primary-color': 'green' },

    }
	}),
);

  1. 不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css应该删掉