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

Answer 2

This cannot be accomplished simply with exclude because you are importing the bootstrap scss files into your app's scss files with a single entry point.

Nor can it be fully accomplished with the :global selector scope, but this can definitely come close to doing the job, especially if you are not using postcss.

To see an ongoing discussion on this topic view this github issue: https://github.com/css-modules/css-modules/pull/65