CSS Modules in React and Webpack Tutorial

CSS modules address the issues of code maintenance and global namespace in CSS. In this video, James Oh talks about what they are, why they should be considered, and how to use them with React and Webpack. James provides a simple tutorial on how to implement CSS Modules and React CSS Modules, and deploying to a production environment. He also talks about how CSS modules impact developers and the future of web development.

[chriszhang]

An awesome introduction to modular css! It helps me a lot, thank you!

[learningtech]

Thanks. Great video!
Quick question: I could not follow when same style is needed for multiple components, how can that be configured/coded. Any recommendation please?

[jakub.konipas]

Nice, short, clear. Is it somehow possible to write e.g. children declaration rules in CSS modules? i mean something like .className > div { ... }

[zun]

Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- should be one of these:
non-empty string | function | object { loader?, options?, ident?, query? } | function | [non-empty string | function | object { loader?, options?, ident?, query? }]
-> Modifiers applied to the module when rule is matched
Details:
* should be a string.
* should be an instance of function
* should be an object.
* should be an instance of function
* should be a string.
* should be an instance of function
* has an unknown property 'modules'. These properties are valid:
object { loader?, options?, ident?, query? }
* has an unknown property 'localIdentName'. These properties are valid:
object { loader?, options?, ident?, query? }
* should be a string.
* should be an instance of function
* should be an object.
* should be an instance of function
* should be a string.
* should be an instance of function
* has an unknown property 'modules'. These properties are valid:
object { loader?, options?, ident?, query? }
* has an unknown property 'localIdentName'. These properties are valid:
object { loader?, options?, ident?, query? }
* should be a string.
* should be an instance of function
* should be an object.
* should be an instance of function
* should be a string.
* should be an instance of function
* has an unknown property 'modules'. These properties are valid:
object { loader?, options?, ident?, query? }
* has an unknown property 'localIdentName'. These properties are valid:
object { loader?, options?, ident?, query? }
* should be a string.
* should be an instance of function
* should be an object.
* should be an instance of function
* should be a string.
* should be an instance of function
* has an unknown property 'modules'. These properties are valid:
object { loader?, options?, ident?, query? }
* has an unknown property 'localIdentName'. These properties are valid:
object { loader?, options?, ident?, query? }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR!
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!

[andrewcomplainer]

No matter what, css doesnt work at all. I ve tried a lot of examples. Any idea?

[RandomMan]

try writing and using css modules and realize that it is gonna become an unmaintainable mess. Who wants to read React JSX that has something like className={styles.bigButton} as opposed to something like className="big-button" ... yeah you avoid global scope but who cares, it's faster, easier to debug, and easier to change if you just name your CSS right.