react-app-rewire-less-modules

Add Less and Less module support to create-react-app 2.0 via react-app-rewired.

Create react app 2.0 already supports CSS modules. This extension adds support for regular less files and *.module.less files.

Installation

npm install --save-dev react-app-rewire-less-modules

OR

yarn add --dev react-app-rewire-less-modules

Usage

Use the following file extensions for any Less module styles:

• *.module.less

Files with the following file extensions will load normally, without the CSS Modules loader:

• *.less

Example

In your react-app-rewired configuration:

1/* config-overrides.js */
2
3const rewireLess = require("react-app-rewire-less-modules");
4
5module.exports = function override(config, env) {
6  
7  config = rewireLess(config, env);
8  
9  // with loaderOptions
10  config = rewireLess.withLoaderOptions({
11      modifyVars: {
12        "@primary-color": "#1890ff",
13      },
14    })(config, env);
15
16  return config;
17};

In your React application:

1// src/App.module.less
2
3.app {
4  color: aqua;
5
6  &:hover {
7    color: lawngreen;
8  }
9}

1// src/App.js
2
3import React from 'react';
4import styles from './App.module.less';
5
6export default ({text}) => (
7    <div className={styles.app}>{text}</div>
8)