search

devloco / create-react-wptheme

Create modern, React-enabled WordPress themes with a single command.
MIT License
359 stars 60 forks source link

CSS Modules className not applied on development #27

Closed vasilenka closed 4 years ago

vasilenka commented 4 years ago

CSS Modules not working for module.scss and module.css files.

The className being generated, but not attached to the HTML.

This is the CSS file being generated

Screen Shot 2019-09-27 at 17 39 35

The className should be applied to <p> tag, but there's not className applied.

Screen Shot 2019-09-27 at 17 39 19

It's not working in development, the production build working just fine.

devloco commented 4 years ago

I'll fix it up this weekend. Thanks for letting me know!

devloco commented 4 years ago

I think this is fixed now. I'm not a CSS or CSS Module expert, so I used an article from the WWW to help me come up with some test scenarios:

How to use Sass and CSS Modules with create-react-app

When I rename App.css to App.module.css and rename all the selectors to replace dashes with underscores, it all seems to work.

However if I renamed App.css to Module.css then it looks broken. So it looks like you need some kind of file name prefix for CSS Modules...?

Anyway, let me know if this isn't what you expected, and, in that case, also some steps to reproduce the issue.

Thanks!

devloco commented 4 years ago

Obligatory link to the updating instructions: https://github.com/devloco/create-react-wptheme#updating-existing-themes

vasilenka commented 4 years ago

Thank you so much! It's working properly now.

Yeah, you need the stylesheet name to be *.module.* to use it on create-react-app because that's how they do the setup on react-scripts webpack config.

https://github.com/devloco/create-react-wptheme-scripts/blob/55b8f14a79ea0913ac1fc95a6c7e1bc0f813f573/packages/react-scripts/config/webpack.config.js#L57-L61