craco-less

Craco Less Plugin

This is a craco plugin that adds Less support to create-react-app version >= 2.

Note: If you want to use Ant Design with create-react-app, you should use the craco-antd plugin. This plugin includes Less, and it also sets up babel-plugin-import so that you only include the required CSS.

Installation

First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Then install craco-less:

$ yarn add craco-less

# Or

$ npm i -S craco-less

Usage

Here is a complete craco.config.js configuration file that adds Less compilation to create-react-app:

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [{ plugin: CracoLessPlugin }]
};

Pass an options object to configure the less-loader options:

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyVars: {
          "@primary-color": "#1DA57A",
          "@link-color": "#1DA57A",
          "@border-radius-base": "2px"
        },
        javascriptEnabled: true
      }
    }
  ]
};

View the less-loader Documentation.

If you need to configure anything else for the webpack build, take a look at the Configuration Overview section in the craco README. You can use CracoLessPlugin while making other changes to babel and webpack, etc.