React CSS Modules File

File reference to add CSS Modules.

// app.jsx
import React from 'react'
import Row from './row'
import './app.css'

export default () => {
  return (
    <div className="list">
      <div className="row">
        <Row />
      </div>
    </div>
  )
}

// row.jsx
import React from 'react'
import './row.css'

export default () => <div class="row">row</div>

The app.jsx rendered as:

<div class="list___c021c">
  <div class="row___c021c">
    <div class="row__d3e0cf">row</div>
  </div>
</div>

Usage

yarn add babel-plugin-react-css-modules-file css-modules-file-loader -D

.babelrc

"plugins": ["babel-plugin-react-css-modules-file"]

webpack config

{
  test: /\.(sc|c|sa)ss$/,
  use: [
    'style-loader',
    'css-loader',
    'css-modules-file-loader',
    'sass-loader'
  ]
}

demo