This project was bootstrapped with Create React App.

In addition to the vanilla setup from create-react-app I've used React App Rewired to tweak 2 things:

• SCSS is now enabled in conjunction with CSS Modules.
• SASS Resources Loader is configured targetting the /style/resources directory. This is really just a QOL thing and can be removed pretty easily.
• SVG React Loader is enabled to allow treating svgs as components.

How to use SCSS in this configuration

This particular setup is only for those seeking to use SCSS CSS Modules, it breaks pretty magnificently otherwise.

// components/app/app.scss
.someClass {
  foo: bar;
  div {
    bit: baz;
  }
}

// components/app/app.js
import styles from './app.scss'

// ...

render () {
  return {
    <div className={styles.someClass}>
      <div>Some Div Content styled by the nested rule.</div>
    </div>
  }
}

How to use SVGs in this configuration

I have set up SVG React Loader to wrap all imported SVGs as components. Once imported, you can simply use them as you would a component. These svgs are then inlined in the HTML, so you can use SCSS to style and manipulate them as necessary.

// components/app/app.js
import SomeIcon from '../../assets/icons/someIcon.svg'

// ...
render () {
  return {
    <div>
      <SomeIcon />
    </div>
  }
}

Giving them a className is just the same as if they were divs

// components/app/app.scss
.svgClass {
  foo: bar;
}

// components/app/app.js
import styles from './app.scss'
import SomeIcon from '../../assets/icons/someIcon.svg'

// ...

render () {
  return {
    <div>
      <SomeIcon className={styles.svgClass} />
    </div>
  }
}