css-loadel - how to correct use with webpack 5

问题

I have some files.

Webpack config

{
    test: cssModuleRegex,
    use: [
        { loader: 'style-loader' },
        {
            loader: 'css-loader',
            options: {
                modules: true,
            }
        },
    ]
},

main.module.scss

.page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

and i use it in react component as css-module

import styles from './main.module.scss';

export class Main extends PureComponent<Props> {
    render() {
        return (
            <div className={ styles.page }>
                <Logo />
            </div>
        );
    }
}

But it doesn't work

If i output the styles module to the console we will see next:

styles [
  [
    './src/client/pages/main/main.module.scss',
    '.main-module__page___3uH9S {\n' +
      '  height: 100vh;\n' +
      '  display: flex;\n' +
      '  align-items: center;\n' +
      '  justify-content: center; }\n',
    ''
  ],
  toString: [Function: toString],
  i: [Function (anonymous)],
  locals: { page: 'main-module__page___3uH9S' }
]

I can use such scheme: styles.locals.page - it works, but its looks ugly How to restore the old configuration?

来源：https://stackoverflow.com/questions/64738605/css-loadel-how-to-correct-use-with-webpack-5