react-scripts-cssmodules
v1.1.50
Published
Configuration and scripts for Create React App - With CSS Modules
Downloads
417
Readme
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.