Less

Parcel supports Less files using the @parcel/transformer-less plugin. To use it, install it into your app and add it to your .parcelrc.

yarn add @parcel/transformer-less@next --dev

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.less": ["@parcel/transformer-less"]
  }
}

Compiled Less files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.less extension.

Example usage

Referencing a Less file in an HTML file:

<link rel="stylesheet" href="style.less" />

Importing a Less file as a CSS module in JavaScript or TypeScript:

import * as classes from "./style.module.less";

document.body.className = classes.body;

Directly compiling Less using the Parcel CLI

parcel build style.less

Configuration

Less can be configured for @parcel/transformer-less in your .parcelrc. The paths option specifies additional directories to search when resolving @import rules, relative to your project root. See the official Less documentation for more details.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.less": [{
      "plugin": "@parcel/transformer-less",
      "config": {
        "paths": ["src/styles"]
      }
    }]
  }
}