craco-less

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: ^2.4.0

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.
  • Open the coverage results in your browser: open coverage/lcov-report/index.html
• All code is formatted with Prettier
  • Run prettier --write **/*.js
  • If you use VS Code, I recommend enabling the formatOnSave option.

License

MIT