- 使用到的第三方库:
- craco
- babel-plugin-import
- 实现代码:
- 在craco安装成功后,在项目根目录下新建一个配置文件即 ‘craco.config.js’
const CracoLessPlugin = require('craco-less'); module.exports = { babel:{ // 装饰器。 plugins:[ // 实现按需引入 [ 'import', { 'libraryName':'antd', 'libraryDirectory':'es', 'style':'css'//因为设置为true变成了less, 故制定为css } ] ] }, plugins: [ // 更改主题色 { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { javascriptEnabled: true, modifyVars: {'@primary-color': 'red'}, } } } }, ] };
- 直接使用antd中的组件即可。
如果在npm i @craco/craco 或者 npm i babel-plugin-import 时报错 Could not resolve dependency: peer ... 推荐使用 --legacy-peer-deps 进行修复
即 npm i --legacy-peer-deps @craco/craco,这种方式解决依赖冲突,不会覆盖已有的
使用 npm i --force @craco/craco 强制从remote更新,并覆盖