less-loader

less-loader plugs the Less CSS preprocessor into a webpack build pipeline, letting you import/require .less files directly in your JavaScript and have them compiled to plain CSS at build time. It’s designed to sit in a loader chain alongside css-loader and style-loader (or MiniCssExtractPlugin in production), matching the standard pattern webpack projects use for every CSS preprocessor.

Beyond basic compilation, it supports passing arbitrary Less options (lessOptions), injecting shared variables or mixins into every entry (additionalData), toggling source maps independently of webpack’s devtool setting, swapping the underlying Less implementation for testing version upgrades, and resolving @imports through either Less’s native resolver or webpack’s own module resolution (so @import '~some-package/file.less'-style imports work against node_modules).

What You Get

• A webpack loader that compiles Less syntax to CSS during the build
• lessOptions for passing any Less CLI option (as an object or a function of the loader context)
• additionalData to prepend/append shared Less code (e.g. environment variables) to every processed file
• Configurable source map generation independent of webpack’s global devtool setting
• A webpackImporter option to resolve @imports through webpack’s module resolution against node_modules

Common Use Cases

• Compiling Less-based component or theme stylesheets in a webpack-bundled frontend app
• Overriding shared Less variables per environment via additionalData without maintaining multiple stylesheet copies
• Importing Less partials from installed npm packages using webpack’s resolver instead of relative paths

Under The Hood

Architecture The loader’s core (src/index.js) receives the raw Less source string from webpack, merges user-supplied lessOptions with defaults ({ relativeUrls: true }), resolves the appropriate Less implementation (locally installed, or an explicit implementation override), and invokes Less’s render() API asynchronously, returning the compiled CSS (and source map, when enabled) back into the webpack loader chain; src/utils.js centralizes option normalization and the dual Less/webpack import-resolution logic, and src/options.json is a JSON Schema used to validate loader options at build time. Tech Stack Implemented in plain JavaScript against the standard webpack loader API (this.async(), this.emitFile, loaderContext), with less itself as a peer dependency so a project’s installed Less version (3.x or 4.x) drives behavior, and klona/schema-utils used internally for option cloning and validation. Code Quality The project has an extensive test/ directory with fixture-based snapshot tests covering options like additionalData, sourceMap, webpackImporter, and error/warning propagation, run through webpack’s own test harness; CI enforces linting and coverage reporting on every change, consistent with the other loaders in the webpack org (css-loader, sass-loader) that share this architecture. API Design Options follow the same shape convention used across the webpack loader ecosystem (options object validated against a JSON Schema, sync or async functions accepted where relevant), which keeps the learning curve low for anyone who has configured sass-loader or postcss-loader before; the one Less-specific wrinkle documented in the README is that Less doesn’t map all its CLI flags 1-to-1 to camelCase, requiring occasional cross-referencing with the Less CLI source.