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

Question

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

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

import './styles.scss'

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

<button className='button'>Click me</button>

既然我想实现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捆绑后创建更多文件.

Answer 1

对于 css 模块，我是这样使用的：

import styles from './styles.scss'

<button className={styles.button}>Click me</button>

导入的样式实际上是一个带有 [className] => [hashed_className] 的地图

您放入 :global 块中的所有内容都不会转换为 css 散列名称

:global {
    .button {
        color: #FF0000;
    }
}
.button {
    color: #000000;
}

应该输出

.button {
    color: #FF0000;
}
.32osj-home-button {
    color: #000000;
}

Answer 2

这是我的设置...我可以做你想做的事。

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },

        {
            test: /\.scss$/,
            loader: ExtractPlugin.extract(['css-loader', 'sass-loader']),
        },
        {
            test: /\.css$/,
            exclude: [/\.global\./, /node_modules/],
            loader: ExtractPlugin.extract(
                {
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true,
                                autoprefixer: true,
                                minimize: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        }
                    ]
                })
        },
        {
            test: /\.css/,
            include: [/\.global\./, /node_modules/],
            loader: ExtractPlugin.extract(
                {
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
        },
        {
            test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'font/[name].[ext]',
                    },
                },
            ],
        },
        {
            test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
            exclude: /\.glyph.svg/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 6000,
                        name: 'image/[name].[ext]',
                    },
                },
            ],
        },
        {
            test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,
            exclude: /\.glyph.svg/,
            use: [
                {
                    loader: 'file-loader',
                    options: { name: 'audio/[name].[ext]' },
                },
            ],
        },