编程知识 cdmana.com

On demand introduction of react antd + customized theme

React-antd On demand introduction of + Custom theme

We need to be right about create-react-app Customize the default configuration of , Here we use  react-app-rewired ( One right create-react-app Community solutions for custom configuration ).

introduce react-app-rewired And modify it package.json The boot configuration in . Because the new  [email protected]  Version relationship , You also need to install  customize-cra.

1. Installation dependency :yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2. modify package.json
    ....
        "scripts": {
                "start": "react-app-rewired start",
                "build": "react-app-rewired build",
                "test": "react-app-rewired test",
                "eject": "react-scripts eject"
        },
    ....
3. Created in the root directory config-overrides.js
// Configure specific modification rules 
        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. remarks : You don't have to introduce styles into the component yourself , namely :import 'antd/dist/antd.css' It should be deleted 
 Copy code 

版权声明
本文为[MK Mack]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210909122358662u.html

Scroll to Top