craco with ant-design and css-modules

user_9593457 0
Viewed 958

I am using craco with CRA to load local less files and ant-design less files. I want to get "localIdentName" effect only for my local styles, but getting for both local and global ant-design styles. How to configure it properly?

my craco.config.js

       {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
                cssLoaderOptions: {
                    modules: {
                        localIdentName: "[local]_[hash:base64:5]",
                    },
                }
            },
        }
css-modules craco antd create-react-app less
1 Answers

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'
        }
    }
}
user_152472560
Related