less-loader

12.3.2 verified Sat Apr 25 auth: no javascript

A webpack loader that compiles Less files into CSS. Current stable version is 12.3.2 (March 2026), with frequent releases addressing compatibility and bug fixes. Requires Node.js >=18.12.0 as of v12.0.0 (breaking change). Supports Less 3.x or 4.x, webpack 5, and optionally @rspack/core. Key differentiators: tight integration with webpack's module system, support for webpackImporter, and the ability to pass Less options dynamically via loader context.

Common errors

error Module not found: Error: Can't resolve 'less' ↓

cause Less is not installed or not in node_modules.

fix

npm install less --save-dev

error ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. ↓

cause Options passed to less-loader are not valid (e.g., incorrect property name).

fix

Check options: valid properties are lessOptions, additionalData, sourceMap, webpackImporter, implementation, lessLogAsWarnOrErr.

error Error: Cannot find module 'less-loader' ↓

cause less-loader is not installed.

fix

npm install less less-loader --save-dev

error TypeError: Cannot read properties of undefined (reading 'options') ↓

cause Loader configuration may be incorrect; missing 'loader' property.

fix

Ensure use array entries are objects with 'loader' and 'options' keys: { loader: 'less-loader', options: { ... } }

Warnings

breaking Node.js version <18.12.0 is no longer supported ↓

fix Upgrade Node.js to >=18.12.0

breaking webpack 4 or earlier not supported; webpack 5 is required ↓

fix Upgrade webpack to ^5.0.0

deprecated The plugin system for less-loader is deprecated; use options instead. ↓

fix Move custom logic to lessOptions or additionalData

gotcha source maps may break if additionalData is used to prepend/append code ↓

fix Set devtool appropriately; consider using sourceMap: true in lessOptions

gotcha Some Less options require camelCase; dash-case options are ignored ↓

fix Use camelCase keys in lessOptions (e.g., relativeUrls instead of relative-urls)

Install

npm install less-loader

yarn add less-loader

pnpm add less-loader

Imports

default (loader)

wrong

const lessLoader = require('less-loader'); // Not a direct import; use as webpack loader in config

correct

module.exports = { module: { rules: [ { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } }

less-loader is used as a webpack loader, not imported directly in application code. It must be configured in webpack.config.js.

LessOptions

wrong

import { LessOptions } from 'less-loader'; // Not exported from less-loader

correct

import type { LessOptions } from 'less';
// Or: type LessOptions = import('less').options

Type definitions for Less options come from the 'less' package, not less-loader.

LoaderContext

wrong

import { LoaderContext } from 'less-loader'; // Not exported

correct

import type { LoaderContext } from 'webpack';
// Or: type LoaderContext = import('webpack').LoaderContext

Used for dynamic lessOptions function signature; imported from webpack.

Quickstart

Minimal webpack setup to compile a Less file to CSS using less-loader, style-loader, and css-loader.

// Install: npm install less less-loader style-loader css-loader --save-dev

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          'style-loader',   // Inject CSS into DOM
          'css-loader',     // Resolve CSS imports
          'less-loader',     // Compile Less to CSS
        ],
      },
    ],
  },
};

// src/style.less
@primary-color: #333;
body {
  color: @primary-color;
}

// src/index.js
import './style.less';
console.log('Hello, world!');