css-loadel-如何正确使用webpack 5

问题描述

我有一些文件。

Webpack配置

{
    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;
}

我在React组件中将其用作CSS模块

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

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

但这不起作用

如果我将样式模块输出到控制台，我们将看到下一个：

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

我可以使用这样的方案： styles.locals.page -可以，但是看起来很丑 如何还原旧配置？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）