Skip to content
This repository has been archived by the owner. It is now read-only.
No description, website, or topics provided.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Archive Notice

This project is archived. Create React App v2 introduced support for CSS Modules. We recommend using the native support for CSS Modules instead of this project.

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>
)
You can’t perform that action at this time.