{"id":26264144,"url":"https://github.com/webpack/less-loader","last_synced_at":"2026-03-11T18:01:26.495Z","repository":{"id":3161991,"uuid":"4192593","full_name":"webpack/less-loader","owner":"webpack","description":"Compiles Less to CSS","archived":false,"fork":false,"pushed_at":"2026-02-28T09:40:56.000Z","size":4594,"stargazers_count":960,"open_issues_count":1,"forks_count":198,"subscribers_count":18,"default_branch":"main","last_synced_at":"2026-03-09T16:48:00.271Z","etag":null,"topics":["less","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"open_collective":"webpack"}},"created_at":"2012-05-01T13:42:53.000Z","updated_at":"2026-02-28T09:40:59.000Z","dependencies_parsed_at":"2026-01-04T03:06:07.978Z","dependency_job_id":null,"html_url":"https://github.com/webpack/less-loader","commit_stats":{"total_commits":403,"total_committers":57,"mean_commits":"7.0701754385964914","dds":0.7766749379652605,"last_synced_commit":"f3d3881e50f43150a9716eabe5c987c990462236"},"previous_names":["webpack/less-loader","webpack-contrib/less-loader"],"tags_count":48,"template":false,"template_full_name":null,"purl":"pkg:github/webpack/less-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fless-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fless-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fless-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fless-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack","download_url":"https://codeload.github.com/webpack/less-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fless-loader/sbom","scorecard":{"id":1238454,"data":{"date":"2025-08-25","repo":{"name":"github.com/webpack-contrib/less-loader","commit":"f14a99ff167ba50c611f91d4687131c513bb5f76"},"scorecard":{"version":"v5.2.1-41-g40576783","commit":"40576783fda6698350fcbbeaea760ff827433034"},"score":5.8,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":6,"reason":"Found 20/29 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#code-review"}},{"name":"Maintained","score":3,"reason":"4 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":10,"reason":"GitHub workflow tokens follow principle of least privilege","details":["Info: topLevel 'contents' permission set to 'read': .github/workflows/dependency-review.yml:5","Info: topLevel 'contents' permission set to 'read': .github/workflows/nodejs.yml:14","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":4,"reason":"dependency not pinned by hash detected -- score normalized to 4","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/nodejs.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/less-loader/nodejs.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:92","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   2 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":8,"reason":"2 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/40576783fda6698350fcbbeaea760ff827433034/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-10-03T22:33:43.384Z","repository_id":3161991,"created_at":"2025-10-03T22:33:43.396Z","updated_at":"2025-10-03T22:33:43.396Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["less","webpack-loader"],"created_at":"2025-03-14T02:01:01.197Z","updated_at":"2026-03-11T18:01:26.488Z","avatar_url":"https://github.com/webpack.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![cover][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# less-loader\n\nA Less loader for webpack that compiles Less files into CSS.\n\n## Getting Started\n\nTo begin, you'll need to install `less` and `less-loader`:\n\n```console\nnpm install less less-loader --save-dev\n```\n\nor\n\n```console\nyarn add -D less less-loader\n```\n\nor\n\n```console\npnpm add -D less less-loader\n```\n\nThen add the loader to your `webpack` configuration. For example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          // compiles Less to CSS\n          \"style-loader\",\n          \"css-loader\",\n          \"less-loader\",\n        ],\n      },\n    ],\n  },\n};\n```\n\nFinally, run `webpack` using the method you normally use (e.g., via CLI or an npm script).\n\n## Options\n\n- **[`lessOptions`](#lessoptions)**\n- **[`additionalData`](#additionalData)**\n- **[`sourceMap`](#sourcemap)**\n- **[`webpackImporter`](#webpackimporter)**\n- **[`implementation`](#implementation)**\n- **[`lessLogAsWarnOrErr`](#lesslogaswarnorerr)**\n\n### `lessOptions`\n\nType:\n\n\u003c!-- eslint-skip --\u003e\n\n```ts\ntype lessOptions = import('less').options | ((loaderContext: LoaderContext) =\u003e import('less').options})\n```\n\nDefault: `{ relativeUrls: true }`\n\nYou can pass any Less specific options to the `less-loader` through the `lessOptions` property in the [loader options](https://webpack.js.org/configuration/module/#ruleoptions--rulequery). See the [Less documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options in dash-case.\n\nSince we're passing these options to Less programmatically, you need to pass them in camelCase here:\n\n#### `object`\n\nUse an object to pass options directly to Less.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n          },\n          {\n            loader: \"css-loader\",\n          },\n          {\n            loader: \"less-loader\",\n            options: {\n              lessOptions: {\n                strictMath: true,\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `function`\n\nAllows setting the Less options dynamically based on the loader context.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              lessOptions: (loaderContext) =\u003e {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.less\") {\n                  return {\n                    paths: [\"absolute/path/c\", \"absolute/path/d\"],\n                  };\n                }\n\n                return {\n                  paths: [\"absolute/path/a\", \"absolute/path/b\"],\n                };\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `additionalData`\n\nType:\n\n```ts\ntype additionalData =\n  | string\n  | ((content: string, loaderContext: LoaderContext) =\u003e string);\n```\n\nDefault: `undefined`\n\nPrepends or Appends `Less` code to the actual entry file.\nIn this case, the `less-loader` will not override the source but just **prepend** the entry's content.\n\nThis is especially useful when some of your Less variables depend on the environment.\n\n\u003e Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.\n\n#### `string`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              additionalData: `@env: ${process.env.NODE_ENV};`,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `function`\n\n##### `Sync`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              additionalData: (content, loaderContext) =\u003e {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.less\") {\n                  return `@value: 100px;${content}`;\n                }\n\n                return `@value: 200px;${content}`;\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n##### `Async`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              additionalData: async (content, loaderContext) =\u003e {\n                // More information about available properties https://webpack.js.org/api/loaders/\n                const { resourcePath, rootContext } = loaderContext;\n                const relativePath = path.relative(rootContext, resourcePath);\n\n                if (relativePath === \"styles/foo.less\") {\n                  return `@value: 100px;${content}`;\n                }\n\n                return `@value: 200px;${content}`;\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `sourceMap`\n\nType:\n\n```ts\ntype sourceMap = boolean;\n```\n\nDefault: depends on the `compiler.devtool` value\n\nBy default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.\nAll values enable source map generation except `eval` and `false` value.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          {\n            loader: \"css-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: \"less-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `webpackImporter`\n\nType:\n\n```ts\ntype webpackImporter = boolean | \"only\";\n```\n\nDefault: `true`\n\nEnables or disables the default `webpack` importer.\n\nThis can improve performance in some cases. Use it with caution because aliases and `@import` from [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules) will not work.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              webpackImporter: false,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `implementation`\n\nType:\n\n```ts\ntype implementation = object | string;\n```\n\n\u003e less-loader compatible with both Less 3 and 4 versions\n\nThe special `implementation` option determines which implementation of Less to use. Overrides the locally installed `peerDependency` version of `less`.\n\n**This option is only really useful for downstream tooling authors to ease the Less 3-to-4 transition.**\n\n#### `object`\n\nExample using a Less instance:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              implementation: require(\"less\"),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### `string`\n\nExample using a resolved Less module path:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              implementation: require.resolve(\"less\"),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `lessLogAsWarnOrErr`\n\nType:\n\n```ts\ntype lessLogAsWarnOrErr = boolean;\n```\n\nDefault: `false`\n\n`Less` warnings and errors will be treated as webpack warnings and errors, instead of being logged silently.\n\n**warning.less**\n\n```less\ndiv {\n  \u0026:extend(.body1);\n}\n```\n\nIf `lessLogAsWarnOrErr` is set to `false` it will be just a log and webpack will compile successfully, but if you set this option to `true` webpack will compile fail with a warning(or error), and can break the build if configured accordingly.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          \"css-loader\",\n          {\n            loader: \"less-loader\",\n            options: {\n              lessLogAsWarnOrErr: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Normal usage\n\nChain the `less-loader` with [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) to immediately apply all styles to the DOM.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          {\n            loader: \"style-loader\", // Creates style nodes from JS strings\n          },\n          {\n            loader: \"css-loader\", // Translates CSS into CommonJS\n          },\n          {\n            loader: \"less-loader\", // Compiles Less to CSS\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nUnfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, [check their executable](https://github.com/less/less.js/blob/3.x/bin/lessc) and search for the dash-case option.\n\n### Source maps\n\nTo enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in the loader's options. If this is not passed, the loader will respect the setting for webpack source maps, set in `devtool`.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  devtool: \"source-map\", // any \"source-map\"-like devtool is possible\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          \"style-loader\",\n          {\n            loader: \"css-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n          {\n            loader: \"less-loader\",\n            options: {\n              sourceMap: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\nIf you want to edit the original Less files inside Chrome, [there's a good blog post](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0). The blog post is about Sass but it also works for Less.\n\n### In production\n\nUsually, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack/mini-css-extract-plugin). This way your styles are not dependent on JavaScript, improving performance and cacheability.\n\n### Imports\n\nFirst we try to use built-in `less` resolve logic, then `webpack` resolve logic.\n\n#### Webpack Resolver\n\n`webpack` provides an [advanced mechanism to resolve files](https://webpack.js.org/configuration/resolve/).\n`less-loader` applies a Less plugin that passes all queries to the webpack resolver if `less` could not resolve `@import`.\nThus you can import your Less modules from `node_modules`.\n\n```css\n@import \"bootstrap/less/bootstrap\";\n```\n\nUsing `~` prefix (e.g., @import \"~bootstrap/less/bootstrap\";) is deprecated and can be removed from your code (**we recommend it**), but we still support it for historical reasons.\nWhy you can removed it? The loader will first try to resolve `@import` as relative, if it cannot be resolved, the loader will try to resolve `@import` inside [`node_modules`](https://webpack.js.org/configuration/resolve/#resolvemodules).\n\nDefault resolver options can be modified by [`resolve.byDependency`](https://webpack.js.org/configuration/resolve/#resolvebydependency):\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  devtool: \"source-map\", // any \"source-map\"-like devtool is possible\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\"style-loader\", \"css-loader\", \"less-loader\"],\n      },\n    ],\n  },\n  resolve: {\n    byDependency: {\n      // More options can be found here https://webpack.js.org/configuration/resolve/\n      less: {\n        mainFiles: [\"custom\"],\n      },\n    },\n  },\n};\n```\n\n#### Less Resolver\n\nIf you specify the `paths` option, modules will be searched in the given `paths`. This is `less` default behavior. `paths` should be an array with absolute paths:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.less$/i,\n        use: [\n          {\n            loader: \"style-loader\",\n          },\n          {\n            loader: \"css-loader\",\n          },\n          {\n            loader: \"less-loader\",\n            options: {\n              lessOptions: {\n                paths: [path.resolve(__dirname, \"node_modules\")],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Plugins\n\nIn order to use [Less plugins](http://lesscss.org/usage/#plugins), simply set the `plugins` option like this:\n\n**webpack.config.js**\n\n\u003c!-- eslint-skip --\u003e\n\n```js\nconst CleanCSSPlugin = require('less-plugin-clean-css');\n\nmodule.exports = {\n  ...\n    {\n      loader: 'less-loader',\n      options: {\n        lessOptions: {\n          plugins: [\n            new CleanCSSPlugin({ advanced: true }),\n          ],\n        },\n      },\n    },\n  ...\n};\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e Access to the [loader context](https://webpack.js.org/api/loaders/#the-loader-context) inside a custom plugin can be done using the `pluginManager.webpackLoaderContext` property.\n\n```js\nmodule.exports = {\n  install(less, pluginManager, functions) {\n    functions.add(\n      \"pi\",\n      () =\u003e\n        // Loader context is available in `pluginManager.webpackLoaderContext`\n\n        Math.PI,\n    );\n  },\n};\n```\n\n### Extracting style sheets\n\nBundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or [Hot Module Replacement(HMR)](https://webpack.js.org/concepts/hot-module-replacement/) in development.\n\nIn production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build.\n\nThere are two possibilities to extract a style sheet from the bundle:\n\n- [`extract-loader`](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)\n- [`MiniCssExtractPlugin`](https://github.com/webpack/mini-css-extract-plugin) (more complex, but works in all use-cases)\n\n### CSS modules gotcha\n\nThere is a known problem when using Less with [CSS modules](https://github.com/css-modules/css-modules) regarding relative file paths in `url(...)` statements.\n[See this issue for an explanation](https://github.com/webpack/less-loader/issues/109#issuecomment-253797335).\n\n## Contributing\n\nWe welcome all contributions!\nIf you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.\n\n[CONTRIBUTING](https://github.com/webpack/less-loader?tab=contributing-ov-file#contributing)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/less-loader.svg\n[npm-url]: https://npmjs.com/package/less-loader\n[node]: https://img.shields.io/node/v/less-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack/less-loader/workflows/less-loader/badge.svg\n[tests-url]: https://github.com/webpack/less-loader/actions\n[cover]: https://codecov.io/gh/webpack/less-loader/branch/main/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack/less-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=less-loader\n[size-url]: https://packagephobia.now.sh/result?p=less-loader\n","funding_links":["https://opencollective.com/webpack"],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fless-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack%2Fless-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fless-loader/lists"}