How to exclude bootstrap files when CSS modules is enabled

Question

I am using both bootstrap and CSS modules by enabling the css-loader's modules option in my project and unfortunately css-loader applys scoping on the bootstrap files too.

I have an app.scss where I am importing all bootstrap sass files. And I import the app.scss file into my app.js file:

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"}
      ]

for example bootstrap's .table class turns to something like .app__table--19A_z

How do you think I can disable CSS modules for bootstrap files.

Answer 1

It could be accomplish with 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.

so to exclude the boostrap scss file should like this:

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