Normal CSS with CSS Modules

Question

I was previously using bootstrap css import fine previously.

However I'm trying to use CSS module so I added a few lines.

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

Now I'm able to use the following sample codes

  import styles from 'styles.css'

and use it in the code like this

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

and it becomes like this in browser

  <div class="styles__container___3dfEE"></div>

I have the following in my index.js

  import 'bootstrap/dist/css/bootstrap.min.css';

Now, all my classes from bootstrap.min.css are no longer working.

How can i enable both css modules as well as continue to use bootstrap css normally?

I'm currently using a "dirty" way to do it, by saving my custom styles as styles.sss instead and added the following codes in webpack config. Not sure whether it will have any issues.

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

What version of the css-loader, style-loader and postcss-loader do you use? — J.Lindebro
– J.Lindebro, Commented Oct 4, 2018 at 8:49
"style-loader": "^0.18.1", "sass-loader": "^6.0.5", "postcss-loader": "^2.0.5", I'm using a boilerplate so I may not be able to update them to latest version for all of them. — Someone Special
– Someone Special, Commented Oct 4, 2018 at 8:51

Uzi · Accepted Answer · 2018-10-04 08:59:32Z

4

you need to import bootstrap's css without going through your original webpack config:

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

this will activate the style-loader and css loader but without the modules: true option

answered Oct 4, 2018 at 8:59

Uzi

2,68216 silver badges14 bronze badges

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

1 Comment

Someone Special Over a year ago

simple and easy, thanks for the solution without changing all my webpack prod/dev/ssr files.

MatrixTXT · Accepted Answer · 2018-10-04 09:05:40Z

0

I have learnt few methods before for this Github pull-request issue.

First, change the file name. Easiest way but ugly.

Change your styles.css to styles.m.css and separate module and plain css like

//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/

Second, separate the folders for module and plain css, while exclude each other.

//Module
exclude: /css/plain/
//Plain
exclude: /css/module/

Third, use resourceQuery

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

And import as

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

answered Oct 4, 2018 at 9:05

MatrixTXT

2,5021 gold badge16 silver badges32 bronze badges

Comments

Pang · Accepted Answer · 2018-10-05 01:40:31Z

0

Try to separate the loaders into different rules. Like this:

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

edited Oct 5, 2018 at 1:40

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Oct 4, 2018 at 9:11

J.Lindebro

2233 silver badges9 bronze badges

1 Comment

Someone Special Over a year ago

this didn't help.. but the accepted answer is sufficient. Thank u!

Collectives™ on Stack Overflow

Normal CSS with CSS Modules

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related