Skip to content

elbstack/react-app-rewire-less-modules

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

/* config-overrides.js */

const rewireLess = require("react-app-rewire-less-modules");

module.exports = function override(config, env) {
  
  config = rewireLess(config, env);
  
  // with loaderOptions
  config = rewireLess.withLoaderOptions({
      modifyVars: {
        "@primary-color": "#1890ff",
      },
    })(config, env);

  return config;
};

In your React application:

// src/App.module.less

.app {
  color: aqua;

  &:hover {
    color: lawngreen;
  }
}
// src/App.js

import React from 'react';
import styles from './App.module.less';

export default ({text}) => (
    <div className={styles.app}>{text}</div>
)

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%