react-scripts-cssmodules

Adds CSS Modules to Create React App.

How to use

Either create a new project using create-react-app my-app --scripts-version react-scripts-cssmodules or within your existing project uninstall react-scripts and install react-scripts-cssmodules.

Using CSS and CSS Modules

To import as regular css, do the same as in CRA. import mystyles.css To import as css modules, rename the file to [name].module.css and the use as normal css modules.

Example

Button.module.css

.button {
  padding: 20px;
}

another-stylesheet.css

.button {
  color: green;
}

Button.js

import React, { Component } from 'react';
import './another-stylesheet.css'; // Import regular stylesheet
import styles from './Button.module.css'; // Import css modules stylesheet as styles
 
class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className={styles.button} />;
  }
}

exported HTML

No clashes from other .button classnames

<div class="src__Button-module___button"></div>

Versioning

This package is 10:1 with Create React App. E.g. v1.1.50 of this package is the same as and interchanable with v1.1.5 of Create React App.

Any additional numbers are fixes for this app only. E.g. v1.1.51 is v1.1.5 of React App with a fix only for cssmodules.

See this CRA Issue for more details, or for a more indepth guide check out this article.