按需引入css
安装customize-cra、babel-plugin-import和react-app-rewired
yarn add react-app-rewired customize-cra babel-plugin-import
在package.json文件中的scripts配置项修改为
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
在项目应用的根目录下创建config-overrides.js文件,代码如下:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
不需要在App.css中全局引入
@import '~antd/dist/antd.css';
自定义主题
安装less less-loader
yarn add less less-loader
在项目应用的根目录下创建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': '#1DA57A' }
}
})
);