Question

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

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

import './styles.scss'

然后，会有一个html元素使用.button

中存在的类./styles.scss

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

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

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类名

import './styles.scss'

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

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

import './styles.scss'

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

import styles from './styles.scss'

OR

是否有任何配置可用于将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] =＆gt;的地图[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]' },
                },
            ],
        },

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

2 个答案: