CODEWITHSUNDEEP
lesscreate-react-appantdcss-modulescraco
Anatoly Shishkin
Anatoly Shishkin

Reputation: 79

craco with ant-design and css-modules

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]",
                    },
                }
            },
        }

Upvotes: 2

Views: 1369

Answers (1)

GreenHand
GreenHand

Reputation: 21

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

Upvotes: 2

Related Questions