{"id":20185,"library":"less-loader","title":"less-loader","description":"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.","status":"active","version":"12.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/webpack/less-loader","tags":["javascript","webpack","loader","less","lesscss","less.js","css","preprocessor"],"install":[{"cmd":"npm install less-loader","lang":"bash","label":"npm"},{"cmd":"yarn add less-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add less-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: the actual Less compiler that less-loader invokes.","package":"less","optional":false},{"reason":"Peer dependency: webpack 5 is required as the bundler.","package":"webpack","optional":false},{"reason":"Optional peer dependency for Rspack compatibility.","package":"@rspack/core","optional":true}],"imports":[{"note":"less-loader is used as a webpack loader, not imported directly in application code. It must be configured in webpack.config.js.","wrong":"const lessLoader = require('less-loader'); // Not a direct import; use as webpack loader in config","symbol":"default (loader)","correct":"module.exports = { module: { rules: [ { test: /\\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } }"},{"note":"Type definitions for Less options come from the 'less' package, not less-loader.","wrong":"import { LessOptions } from 'less-loader'; // Not exported from less-loader","symbol":"LessOptions","correct":"import type { LessOptions } from 'less';\n// Or: type LessOptions = import('less').options"},{"note":"Used for dynamic lessOptions function signature; imported from webpack.","wrong":"import { LoaderContext } from 'less-loader'; // Not exported","symbol":"LoaderContext","correct":"import type { LoaderContext } from 'webpack';\n// Or: type LoaderContext = import('webpack').LoaderContext"}],"quickstart":{"code":"// Install: npm install less less-loader style-loader css-loader --save-dev\n\n// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          'style-loader',   // Inject CSS into DOM\n          'css-loader',     // Resolve CSS imports\n          'less-loader',     // Compile Less to CSS\n        ],\n      },\n    ],\n  },\n};\n\n// src/style.less\n@primary-color: #333;\nbody {\n  color: @primary-color;\n}\n\n// src/index.js\nimport './style.less';\nconsole.log('Hello, world!');","lang":"javascript","description":"Minimal webpack setup to compile a Less file to CSS using less-loader, style-loader, and css-loader."},"warnings":[{"fix":"Upgrade Node.js to >=18.12.0","message":"Node.js version <18.12.0 is no longer supported","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Upgrade webpack to ^5.0.0","message":"webpack 4 or earlier not supported; webpack 5 is required","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Move custom logic to lessOptions or additionalData","message":"The plugin system for less-loader is deprecated; use options instead.","severity":"deprecated","affected_versions":">=11.0.0"},{"fix":"Set devtool appropriately; consider using sourceMap: true in lessOptions","message":"source maps may break if additionalData is used to prepend/append code","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use camelCase keys in lessOptions (e.g., relativeUrls instead of relative-urls)","message":"Some Less options require camelCase; dash-case options are ignored","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install less --save-dev","cause":"Less is not installed or not in node_modules.","error":"Module not found: Error: Can't resolve 'less'"},{"fix":"Check options: valid properties are lessOptions, additionalData, sourceMap, webpackImporter, implementation, lessLogAsWarnOrErr.","cause":"Options passed to less-loader are not valid (e.g., incorrect property name).","error":"ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema."},{"fix":"npm install less less-loader --save-dev","cause":"less-loader is not installed.","error":"Error: Cannot find module 'less-loader'"},{"fix":"Ensure use array entries are objects with 'loader' and 'options' keys: { loader: 'less-loader', options: { ... } }","cause":"Loader configuration may be incorrect; missing 'loader' property.","error":"TypeError: Cannot read properties of undefined (reading 'options')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}