react中的ui元件antd使用

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"
    },
....
3.根目錄下建立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' },
}
}),
);
4.備注：不用在元件裡親自引入樣式了，即：import 'antd/dist/antd.css'應該删掉