React中使用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'应该删掉

 

posted @ 2021-11-30 13:51  蜗牛snail  阅读(210)  评论(0编辑  收藏  举报
蜗牛前端 蜗牛文学