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


101.0.54 years ago4 years agoMinified + gzip package size for @baristalabs/react-app-rewire-css-modules in KB



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

CSS Module styles can be written in CSS or SASS.


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


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


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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.