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'));

效果圖

按鈕為綠色即為成功