带有CSS模块的普通CSS

我以前使用引导css导入

然而，我试图使用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'
        ]
      },

在代码中使用它，就像这样

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

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

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

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

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

---

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

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

---

这将激活样式加载器和css加载器，但没有

模块：true

选项

我以前学过一些方法

---

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

将

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'

---

---

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

{
  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加载器、样式加载器和postcss加载器的版本是什么？“样式加载器”：“^0.18.1”、“sass加载器”：“^6.0.5”、“postcss加载器”：“^2.0.5”，我使用的是样板文件，因此可能无法将它们全部更新为最新版本。这没有帮助。。但公认的答案已经足够了。谢谢你！简单易用，感谢您提供的解决方案，无需更改我的所有网页包prod/dev/ssr文件。

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

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

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