Create-react-app: How to use CSS-module in webpack 4.19, React 16.5?

Created on 16 Oct 2018 · 7Comments · Source: facebook/create-react-app

Worse Experience in React. I just installed React and eject When I tried to use css-modules but I was unable because the all webpack.config.dev.js code has changed which was before we configure like modules: true, localIdentName: '[name]_[local]_[hash:base64:5]' but Now this option is disappeared Please give me some expected Guide as possible as with example.

Best regard.

question

Source

lifeeric

👍2

Most helpful comment

I solved it couple days before by the old way Which we use like this

test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),

Include the modules: true,modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' at line 271 below. It works well As I expected

So Enjoy it Again!

lifeeric on 25 Oct 2018

👍6 ❤1

All 7 comments

CSS Modules work out of the box in Create React App.

If you eject, you're on your own -- sorry. The webpack documentation would be a great place to start.

Timer on 16 Oct 2018

Sorry, but in this case CSS modules should work by default in ejected CRA, or it does break an app, and eject is useless

JustFly1984 on 17 Oct 2018

CSS Modules work after ejecting. If they don't please file a new issue.

Timer on 17 Oct 2018

@John99Dev I was struggling like you with the same issue, because it is supposed to work by default but it's not completely true.
Before this release, we could import the css module from a plain Button.css file, now you have to rename your css file to Button.module.css. It solved the problem for me.

do-diegoortiz on 20 Oct 2018

❤3 👍2

I solved it couple days before by the old way Which we use like this

test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),

Include the modules: true,modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' at line 271 below. It works well As I expected

So Enjoy it Again!

lifeeric on 25 Oct 2018

👍6 ❤1

I solved it couple days before by the old way Which we use like this
test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
Include the modules: true,modules: true, localIdentName: '[name]__[local]__[hash:base64:5]' at line 271 below. It works well As I expected

So Enjoy it Again!

Thank you @John99Dev .

sailesh97 on 4 Nov 2018

❤1

@John99Dev I was struggling like you with the same issue, because it is supposed to work by default but it's not completely true.
Before this release, we could import the css module from a plain Button.css file, now you have to rename your css file to Button.module.css. It solved the problem for me.

That's works pretty good for me! Thanks