less - 带有 ant-design 和 css-modules 的 craco

Question

我正在使用带有 CRA 的 craco 来加载本地更少的文件和 ant-design 更少的文件。我只想为我的本地样式获得“localIdentName”效果，但同时获得本地和全局 ant-design 样式。如何正确配置？

我的 craco.config.js

       {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: "[local]_[hash:base64:5]",
                    },
                }
            },
        }

Answer 1

try this?

{
    plugin: CracoAntDesignPlugin,
    options: {
        cssLoaderOptions: {
            sourceMap: true,
            modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]',
                mode: resourcePath => {
                    if (/pure\.(less|css)$/i.test(resourcePath)) {
                        return 'pure';
                    }

                    if (/(global)\.(less|css)$/i.test(resourcePath)) {
                        return 'global';
                    }

                    if (/antd/i.test(resourcePath)) {
                        return 'global';
                    }

                    return 'local';
                }
            }
        },
        babelPluginImportOptions: {
            libraryDirectory: 'es'
        }
    }
}