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

importReact,{Component}from'react';import'./another-stylesheet.css';// Import regular stylesheetimportstylesfrom'./Button.module.css';// Import css modules stylesheet as stylesclassButtonextendsComponent{render(){// You can use them as regular CSS stylesreturn<divclassName={styles.button}/>;}}

exported HTML

No clashes from other .button classnames

<divclass="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.