如何让CSS模块默认全局导入文件？

我正在尝试将CS​​S模块实现到我正在使用React和Webpack的项目中.但是,我想继续使用我创建的所有全局css.

例如,之前我在React中导入了css,就像这样

import './styles.scss'

然后,会有一个使用.button内部存在的类的html元素./styles.scss

Click me

既然我想实现CSS模块,我css-loader就像这样在webpack中修改了配置

module: {
  rules: [{
    test: /\.s?css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          // This is where I added the config for css modules
          modules: true,
          localIdentName: '[hash:base32:5]-[name]-[local]',
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: './postcss.config.js',
          },
        },
      },
      'sass-loader',
    ]
  }]
}

但是,现在我button在导入时不能使用classname

import './styles.scss'

因为类名./styles.scss都被转换为基于哈希的类名32osj-home-button

基本上,当我以这种方式导入时,如何配置css-loader以正常加载css

import './styles.scss'

但是当我以这种方式导入时使用css模块？

import styles from './styles.scss'

要么

是否有任何配置可用于将css模块设置:global为默认加载所有css ,并且仅在:local我指定时加载css ？

仅供参考,我知道我可以制作2个加载器配置来为这样命名的css文件应用css模块

styles.modules.scss

并将普通的css-loader应用于默认命名的css

styles.scss

但是,我不想这样做,因为它会在Webpack捆绑后创建更多文件.