@watiko/react-app-rewire-css-modules
v1.1.2
Published
Add [CSS Module](https://github.com/css-modules/css-modules) loaders to your [create-react-app](https://github.com/facebookincubator/create-react-app) via [react-app-rewired](https://github.com/timarney/react-app-rewired).
Downloads
1
Readme
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>
)
Advanced Usage
Configure sass-loader
/* config-overrides.js */
// `rewireCssModulesFactory({})` equivalent to the default exported value.;
const { rewireCssModulesFactory } = require('react-app-rewire-css-modules');
const path = require('path');
module.exports = function override(config, env) {
const rewireCssModules = rewireCssModulesFactory({
includePaths: [
path.resolve(__dirname, "../scss/includePath")
],
});
// ...
config = rewireCssModules(config, env);
// ...
return config;
}