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.

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.

craco-less is tested with:

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

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

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

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.modules
  • Default: false
  • Specify which rule from sass loader to inherit. With CSS Modules or default one
• 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
        }
      }
    }
  ]
};

You can pass modules option to be true to inherit from SASS loader with CSS Modules enabled. For example:

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

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

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.)

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.

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.

MIT