Question

我以前曾经使用bootstrap css import很好。

但是我试图使用CSS模块，所以我增加了几行。

innerView

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

outerView

并在这样的代码中使用它

  {
        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'

我的index.js中包含以下内容

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

现在，我bootstrap.min.css中的所有类都不再起作用。

我如何启用两个CSS模块以及继续正常使用引导CSS？

我目前正在使用一种“肮脏”的方式，方法是将自定义样式保存为styles.sss，并在webpack配置中添加了以下代码。不确定是否会有任何问题。

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

Answer 1

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

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

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

Answer 2

我以前学过一些Github pull-request issue的方法。

首先，更改文件名。最简单的方法却很丑。

将您的styles.css更改为styles.m.css，并分别将模块和普通CSS分开

//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/

第二，分别将模块和普通css的文件夹分开，而互斥。

//Module
exclude: /css/plain/
//Plain
exclude: /css/module/

第三，使用resourceQuery

test: /\.css$/,
oneOf: [{
    resourceQuery: /^\?raw$/,
    use: [...]
}

并导入为

import './bootstrap.min.css?raw'

Answer 3

尝试将装载程序分成不同的规则。像这样：

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

具有CSS模块的普通CSS

3 个答案: