react-app-rewire-css-modules

react-app-rewire-react-toolbox

Add CSS Module loaders to your create-react-app via react-app-rewired.

Installation

This package is not yet published to the npm registry. Install from GitHub:

yarn add --dev KaplanTestPrep/react-app-rewire-css-modules react-app-rewired

Example

In your package.json

  /* package.json */
 
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}

In your react-app-rewired configuration:

/* config-overrides.js */
const rewireCssModules = require('react-app-rewire-css-modules');
const customProperties = {
  '--checkbox-color': 'purple',
  '--input-text-label-color': 'purple'
};
 
module.exports = function override(config, env, customProperties) {
  config = rewireCssModules(config, env, customProperties);
  return config;
};

In your React application:

// src/App.css 
 
.app {
  color: aqua;
  
  &:hover {
    color: lawngreen;
  }
}

// src/App.js
 
import React from 'react';
import styles from './App.css';
import { Input } from '@abot/react-higgs/lib/input'; // Note: not from @abot/react-higgs/lib/input/Input
 
 
export default ({text}) => (
    <div>
      <div className={styles.app}>{text}</div>
      <Input label="xxx" />
    </div>
)