React按需引入antd相关配置

全量引入css：修改src/App.css，在文件顶部引入 antd/dist/antd.css,在app.css 最上面@import '~antd/dist/antd.css'；

实现按需打包与引入: 只打包import引入组件的js/css；

需进行如下配置：

一、下载antd的包 npm install antd

    实现按需打包： 只打包import引入组件的js/css

二、下载依赖包（定义组件按需求打包）

　　npm install react-app-rewired customize-cra babel-plugin-import

　　npm install less less-loader

三、修改 package.json

react-scripts 需改为react-app-rewired


"scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-app-rewired eject"
 }

四、项目根目录下配置 config-overrides.js

const {override,fixBabelImports,addLessLoader,addWebpackAlias} =require('customize-cra');

　const path = require("path");

module.exports = override(
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true,//自动打包相关的样式 默认为 style:'css'
    }),
    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars:{'@primary-color':'#1DA57A'},
    }),
　　 // 增加路径别名的处理 
　　 addWebpackAlias({ '@': path.resolve('./src') })
);

五、在app.js引入需要的antd模块

import React ,{Component} from 'react';
import { Button , message} from 'antd';
/* 
应用的根组件
*/
export default class App extends Component{

    handleClick = ()=>{
        message.success('成功啦')
    }
    render(){
        return (
            <Button type="primary" onClick={this.handleClick}>测试antd</Button>
            )
    }
}

说明：

如运行出现如下报错：

原因： less-loader安装的版本过高，上面写法是低版本less-loader

解决方案： 

方案一、更改less-loader版本

1.npm uninstall less-loader ；   2.npm install less-loader@5.0.0/yarn add less-loader@5.0.0

方案二、更改配置方式

addLessLoader({
    lessOptions:{
        javascriptEnabled: true,
        modifyVars: { '@primary-color': 'green' },
    }
}),    

 说明：

第二种配置按需引入方式

const alter_config = () => (config, env) => {
    const oneOf_loc = config.module.rules.findIndex(n => n.oneOf)
    config.module.rules[oneOf_loc].oneOf = [    //例如要增加处理less的配置
        {
            test: /\.less$/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                    },
                },
                {
                    loader: require.resolve('less-loader'),
                    options: {
                        modules: true,
                        localIndexName: "[name]__[local]___[hash:base64:5]",
                        javascriptEnabled: true,
                        modifyVars: { '@primary-color': '#1DA57A' },
                    }
                }
            ],
        },
        ...config.module.rules[oneOf_loc].oneOf
    ]

    return config;
}

module.exports = override(

    alter_config(),   //将自定义配置组合进来
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,//自动打包相关的样式 默认为 style:'css'
    }),
    // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
    // addLessLoader({
    //     javascriptEnabled: true,
    //     modifyVars: { '@primary-color': '#1DA57A' },
    // }),
);

 样式模块化配置

安装css-modules包
//scss版本
yarn add --dev react-app-rewire-css-modules sass-loader sass
//less版本
yarn add --dev react-app-rewire-less-modules
根目录创建config-overrides.js并编辑以下代码
/*config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');

module.exports = function override(config, env) {
//css模块化
config = rewireCssModules(config, env);
return config;
};

css文件后缀需要加上特殊写法
*.module.css
*.module.less
*.module.scss