create-react-scripts工程支持antd的按需加载,less,css-modules
reactantdcreate-react-scriptslesscss-modules

在create-react-scripts创建的项目中,我们要使用antd组件库,由于antd是less的,而create-react-scripts默认的是支持saas,所以我们要在配置上做一些调整,使其支持ant按需加载,less,以及css-modules。

根据官网文档,我们可以使用@craco/craco来修改webpack的配置。

调整后的craco.config.js文件如下

const CracoAntDesignPlugin = require("craco-antd");
const CracoLessPlugin = require('craco-less');

module.exports={
    plugins: [
        {
            plugin: CracoAntDesignPlugin,
        },
        {
            plugin: CracoLessPlugin,
            options: {
                modifyLessRule: function(lessRule, _context) {
                    lessRule.test = /\.(module)\.(less)$/;
                    lessRule.exclude = /node_modules/;
                    return lessRule;
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: '[name]__[local]--[hash:base64:5]',
                    }
                },
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                }
            },
        },
    ]
}




暂无评论