react-app-rewire-css-modules

Add CSS Module loaders to your create-react-app via react-app-rewired.

CSS Module styles can be written in CSS or SASS.

Installation

This package is not yet published to the npm registry. Install from GitHub:

yarn add --dev codebandits/react-app-rewire-css-modules sass-loader node-sass

OR

npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass

Usage

Use the following file extensions for any CSS Modules styles:

• *.module.css
• *.module.sass
• *.module.scss

Files with the following file extensions will load normally, without the CSS Modules loader:

• *.css
• *.sass
• *.scss

Example

In your react-app-rewired configuration:

/* config-overrides.js */

const rewireCssModules = require('react-app-rewire-css-modules');

module.exports = function override(config, env) {
    // ...
    config = rewireCssModules(config, env);
    // ...
    return config;
}

In your React application:

// src/App.module.scss

.app {
  color: aqua;
  
  &:hover {
    color: lawngreen;
  }
}

// src/App.js

import React from 'react';
import styles from './App.module.scss';

export default ({text}) => (
    <div className={styles.app}>{text}</div>
)

Advanced Usage

Configure sass-loader

/* config-overrides.js */

// `rewireCssModulesFactory({})` equivalent to the default exported value.;
const { rewireCssModulesFactory } = require('react-app-rewire-css-modules');
const path = require('path');

module.exports = function override(config, env) {
    const rewireCssModules = rewireCssModulesFactory({
      includePaths: [
        path.resolve(__dirname, "../scss/includePath")
      ],
    });
    // ...
    config = rewireCssModules(config, env);
    // ...
    return config;
}