Doesn't work with CSS Modules

[itayganor]

In my project, I use CSS classnames as such:

import classes from './Button.module.less';

function Button({...rest}) {
    return <button className={classes.button} {...rest}/>;
}

configured on webpack as:

{
    test: /\.module\.less$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                hmr: isDevMode,
            },
        },
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            },
        },
        'less-loader',
    ],
},

And it seems themes-switch are not able to keep that generated classnames (by CSS Modules) when generating themes.

Is there any way to make it work?

I don't think it should be complicated; the localIdentName should be considered when reading the file content.

[terence55]

This plugin can not work with CSS modules, because it assumes that elements in different themes use the same class name, so the style can be changed with the switch of the theme files in real time, but in CSS modules each class name will be compiled into a unique name. If you already use CSS modules, then I think you can switch between themes by importing different theme files and state management without using this plugin.

[itayganor]

For future googlers: Since asking this I have made a Webpack plugin that supports switching themes while working with CSS Modules.