时间戳

首页 > 解决方案 > 带有 CSS 模块的普通 CSS

css - 带有 CSS 模块的普通 CSS

问题描述

我以前使用 bootstrap css import 很好。

但是我正在尝试使用 CSS 模块，所以我添加了几行。

  {
        test: /\.css$/,
        use:  [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              importLoaders: 1, 
              modules: true, //<- Added to enable css module
              localIdentName: '[name]__[local]___[hash:base64:5]' //<-Added to enable css module
            }
          },
          'postcss-loader'
        ]
      },

现在我可以使用以下示例代码

  import styles from 'styles.css'

并在这样的代码中使用它

  <div className={styles.container}></div>

在浏览器中变成这样

  <div class="styles__container___3dfEE"></div>

我的 index.js 中有以下内容

  import 'bootstrap/dist/css/bootstrap.min.css';

现在，我所有来自 bootstrap.min.css 的课程都不再工作了。

如何启用两个 css 模块并继续正常使用引导 css？

我目前正在使用“肮脏”的方式来做到这一点，将我的自定义样式保存为 styles.sss 并在 webpack 配置中添加以下代码。不知道会不会有问题。

{
    test: /\.css$/,
    use:  [
      'style-loader',
      { 
        loader: 'css-loader', 
        options: { 
          importLoaders: 1
        }
      },
      'postcss-loader'
    ]
  },
    {
    test: /\.sss$/,
    use:  [
      'style-loader',
      { 
        loader: 'css-loader', 
        options: { 
          importLoaders: 1, 
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'postcss-loader'
    ]
  }

标签： cssreactjscss-modulesreact-css-modules

解决方案

您需要导入引导程序的 css 而无需通过原始 webpack 配置：

import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";

这将激活样式加载器和 css 加载器，但没有modules: true选项

推荐阅读