React4.x配置样式按需引入和自定义主题

React4.x配置样式按需引入和自定义主题

安装所需依赖

yarn add @craco/craco babel-plugin-import craco-less

添加配置文件

在根目录创建craco.config.js文件

craco.config.js文件内容

const CracoLessPlugin = require('craco-less');
module.exports = {
    // 配置按需引入
    babel:{
        plugins: [
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    "style": true //设置为true即是less
                }
            ]
        ]
    },
    plugins: [{
        plugin: CracoLessPlugin,
        options: {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: {
                        '@primary-color': '#1DA57A'
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },],
};

启动项目查看结果

app.js

import React, {Component} from 'react';
// 引入antd
import { Button } from 'antd';

class App extends Component {
    render() {
        return (
            <div>
                App.....
                App.....
                App.....
                <Button type="primary">Primary Button</Button>
            </div>
        );
    }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

效果图

 按钮为绿色即为成功