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.

Possible duplicate of webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles? — Michael Jungo
– Michael Jungo, Commented May 27, 2017 at 10:27
Defining separate rules looks like a reasonable solution but it still pollute the bootstrap files even if I set exclude: /node_modules/ — bigfanjs
– bigfanjs, Commented May 27, 2017 at 14:55

Adi Prasetyo · Accepted Answer · 2017-08-02 06:20:06Z

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

answered Aug 2, 2017 at 6:20

Adi Prasetyo

1,0571 gold badge16 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew2 · Accepted Answer · 2017-09-06 18:48:24Z

1

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

answered Sep 6, 2017 at 18:48

Drew2

4012 silver badges14 bronze badges

Comments

Konstantin · Accepted Answer · 2020-08-27 20:17:25Z

Yes Drew2 advice to look to githup issue is very helpful. Add a query to bootstrap css import path:

import 'bootstrap/dist/css/bootstrap.css?bootstrap'
import 'bootstrap/dist/js/bootstrap'
import App from './App'

And in webpack.config use "oneOf" for css rule:

    rules: [
  ...
  {
    test: /\.(css|pcss)$/,
    oneOf: [
      {
        resourceQuery: /bootstarp/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: {
                localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },

  ...
],

OR with include/exclude:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import App from './App'


      rules: [
...
{
    test: /\.(css|pcss)$/,
    exclude: /bootstrap\/dist\/css\/bootstrap\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 1,
          modules: {
            localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
          },
          // exportOnlyLocals: false,
        },
      },
      {
        loader: 'postcss-loader',
        options: { sourceMap: true },
      },
    ],
  },

  {
    test: /\.(css|pcss)$/,
    include: /bootstrap\/dist\/css\/bootstrap\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 1,
          // exportOnlyLocals: false,
        },
      },
      {
        loader: 'postcss-loader',
        options: { sourceMap: true },
      },
    ],
  },

... ]

Collectives™ on Stack Overflow

How to exclude bootstrap files when CSS modules is enabled

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related