webpack - 启用 CSS 模块时如何排除引导文件

Question

我通过启用 css-loader 同时使用 Bootstrap 和 CSS 模块的模块选项在我的项目中，不幸的是css-loader也对引导文件应用范围。

我有一个 app.scss我在哪里导入所有引导 sass 文件。我导入 app.scss文件到我的app.js文件:
import "./app.scss";

  { test: /\.scss$/,
    use: [
        {loader: "style-loader"},
        {
          loader: "css-loader",
          options: {
            sourceMap: true,
            modules: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]"
          }
        },
        {loader: "sass-loader"}
      ]

例如 bootstrap 的 .table类变成类似 .app__table--19A_z
你认为我可以如何禁用引导文件的 CSS 模块。

Answer 1

可以通过 module rule.exclude 来完成

The Condition must NOT match. The convention is to provide a string or array of strings here, but it's not enforced.

所以排除 boostrap scss 文件应该是这样的:

{
  test: /\.scss$/,
  use: ...
  exclude: [
    path.resolve(__dirname, "node_modules/bootstrap"),
  ]
}