How I integrated CSS Modules with SCSS into my React application

I recently started on an Isomorphic React project. I wanted to use this opportunity to utilize tools that were on my “potential to use” list, and CSS Modules was one of them.

Take a look at this image, do you notice something different?

Facebook’s Website Console Snippet

The class names look like some random gibberish hash. This is what CSS Modules looks like in production. It enables you to have unique class names, preventing conflicts between common class names in your application.

Here’s an example of how a CSS Module is used:

/** App.scss */
.app {
  background: red;
}
/** App.jsx */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import styles from './App.scss'
class App extends Component {
  render() {
    return (
      <div className={styles.app}>Hello App!</div>
    )
  }
}

Why CSS Modules with SCSS

CSS Modules allow you to have modular styling in your components. This means no more conflicts of…