CSS Modules to the rescue.jsx

Looks like collision
Look, ma, no _bem!
  1. We tell webpack to pipe all files with .css extension through style-loader, css-loader and stylus-loader. The latter is used in place of your favorite css tool, so feel free to change it to anything else (personally, I’m fond of postcss). After all processing, we use ExtractTextPlugin to pack all resulting styles into one css file.
  2. modules parameter to css-loader makes it use CSS Modules, and importLoaders=1 stands for enabling us to reuse class styles from one module in others, which I’ll show a bit later.
  3. Note that we’re passing two loader strings into ExtractTextPlugin. Configuring all loaders in one string somehow breaks the build, so be warned.
Modules are always cool

Use CSS Modules, write good styles, love mom and PostCSS.

--

--

JavaScript kitten by day, Code Hipsters Editor-in-Chief by night

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Suzdalev

Victor Suzdalev

JavaScript kitten by day, Code Hipsters Editor-in-Chief by night