Craco Less Plugin

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

Use react-app-rewired for create-react-app version 1.

Ant Design

If you want to use Ant Design with create-react-app, you should use the craco-antd plugin. craco-antd includes Less and babel-plugin-import (to only include the required CSS.) It also makes it easy to customize the theme variables.

Supported Versions

craco-less is tested with:

react-scripts: ^2.1.1
@craco/craco: ^3.2.2

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 }]
};

Configuration

You can pass an options object to configure the loaders and plugins. You can also pass a modifyLessRule callback to have full control over the Less webpack rule.

options.styleLoaderOptions
- Default: {}
- View the style-loader options
options.cssLoaderOptions
- Default: { importLoaders: 2 }
- View the css-loader options
options.postcssLoaderOptions
- Default: { ident: "postcss", plugins: () => [ ... ] }
- View the postcss-loader options
options.lessLoaderOptions
- Default: {}
- View the less-loader documentation
- View the Less options
  - You must use "camelCase" instead of "dash-case", e.g. --source-map => sourceMap
options.miniCssExtractPluginOptions (only used in production)
- Default: {}
- View the mini-css-extract-plugin documentation
options.modifyLessRule(lessRule, context)
- A callback function that receives two arguments: the webpack rule, and the context. You must return an updated rule object.
  - lessRule:
    - test: Regex (default: /\.less$/)
    - exclude: Regex (default: /\.module\.(less)$/)
    - use: Array of loaders and options.
  - context:
    - env: "development" or "production"
    - paths: An object with paths, e.g. appBuild, appPath, ownNodeModules

For example, to configure less-loader:

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

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

CSS Modules

You can configure the css-loader options to set up CSS modules. For example:

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          modules: true,
          localIdentName: "[local]_[hash:base64:5]"
        }
      }
    }
  ]
};

CSS modules gotcha

There is a known problem with Less and CSS modules regarding relative file paths in url(...) statements. See this issue for an explanation.

(Copied from the less-loader README.)

Further Configuration

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.

Contributing

Install dependencies:

$ yarn install

# OR

$ npm install

Run tests:

$ yarn test

Before submitting a pull request, please check the following:

All tests are passing
- Run yarn test
100% test coverage
- Coverage will be printed after running tests.
- Check the coverage results in your browser: open coverage/lcov-report/index.html
No ESLint errors
- yarn lint
All code is formatted with Prettier
- yarn format
- If you use VS Code, you should enable the formatOnSave option.

License

MIT

runrunmeme / craco-less