-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path109.f966a58b90dc2d19446c.chunk.js
1 lines (1 loc) · 54.1 KB
/
109.f966a58b90dc2d19446c.chunk.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{370:function(n,s,a){"use strict";a.r(s),s.default='<p><a href="https://npmjs.com/package/less-loader"><img src="https://img.shields.io/npm/v/less-loader.svg" alt="npm"></a>\n<a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/less-loader.svg" alt="node"></a>\n<a href="https://david-dm.org/webpack-contrib/less-loader"><img src="https://david-dm.org/webpack-contrib/less-loader.svg" alt="deps"></a>\n<a href="https://github.com/webpack-contrib/less-loader/actions"><img src="https://github.com/webpack-contrib/less-loader/workflows/less-loader/badge.svg" alt="tests"></a>\n<a href="https://codecov.io/gh/webpack-contrib/less-loader"><img src="https://codecov.io/gh/webpack-contrib/less-loader/branch/master/graph/badge.svg" alt="cover"></a>\n<a href="https://gitter.im/webpack/webpack"><img src="https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg" alt="chat"></a>\n<a href="https://packagephobia.now.sh/result?p=less-loader"><img src="https://packagephobia.now.sh/badge?p=less-loader" alt="size"></a></p>\n<p>A Less loader for webpack. Compiles Less to CSS.</p>\n<h2 id="getting-started">Getting Started<a href="#getting-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>To begin, you\'ll need to install <code>less</code> and <code>less-loader</code>:</p>\n<pre><code class="hljs language-console">$ npm install less less-loader --save-dev\n</code></pre>\n<p>Then add the loader to your <code>webpack</code> config. For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// compiles Less to CSS</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>And run <code>webpack</code> via your preferred method.</p>\n<h2 id="options">Options<a href="#options" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<table>\n<thead>\n<tr>\n<th align="center">Name</th>\n<th align="center">Type</th>\n<th align="center">Default</th>\n<th align="left">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#lessoptions"><code>lessOptions</code></a></strong><p class="description mobile"><code>{Object\\|Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Object\\|Function}</code></td>\n<td align="center"><code>{ relativeUrls: true }</code></td>\n<td align="left">Options for Less.</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#additionaldata"><code>additionalData</code></a></strong><p class="description mobile"><code>{String\\|Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|Function}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Prepends/Appends \n<code>Less</code>\n code to the actual entry file.</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#sourcemap"><code>sourceMap</code></a></strong><p class="description mobile"><code>{Boolean}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean}</code></td>\n<td align="center"><code>compiler.devtool</code></td>\n<td align="left">Enables/Disables generation of source maps.</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#webpackimporter"><code>webpackImporter</code></a></strong><p class="description mobile"><code>{Boolean}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean}</code></td>\n<td align="center"><code>true</code></td>\n<td align="left">Enables/Disables the default Webpack importer.</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#implementation"><code>implementation</code></a></strong><p class="description mobile"><code>{Object\\|String}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Object\\|String}</code></td>\n<td align="center"><code>less</code></td>\n<td align="left">Setup Less implementation to use.</td>\n</tr>\n</tbody>\n</table>\n<h3 id="lessoptions"><code>lessOptions</code><a href="#lessoptions" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Object|Function</code>\nDefault: <code>{ relativeUrls: true }</code></p>\n<p>You can pass any Less specific options to the <code>less-loader</code> through the <code>lessOptions</code> property in the <a href="/configuration/module/#ruleoptions--rulequery">loader options</a>. See the <a href="http://lesscss.org/usage/#command-line-usage-options">Less documentation</a> for all available options in dash-case. Since we\'re passing these options to Less programmatically, you need to pass them in camelCase here:</p>\n<h4 id="object"><code>Object</code><a href="#object" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Use an object to pass options through to Less.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n lessOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n strictMath<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function"><code>Function</code><a href="#function" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Allows setting the options passed through to Less based off of the loader context.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n lessOptions<span class="token punctuation">:</span> <span class="token punctuation">(</span>loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// More information about available properties https://webpack.js.org/api/loaders/</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> resourcePath<span class="token punctuation">,</span> rootContext <span class="token punctuation">}</span> <span class="token operator">=</span> loaderContext<span class="token punctuation">;</span>\n <span class="token keyword">const</span> relativePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">relative</span><span class="token punctuation">(</span>rootContext<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>relativePath <span class="token operator">===</span> <span class="token string">"styles/foo.less"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n paths<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"absolute/path/c"</span><span class="token punctuation">,</span> <span class="token string">"absolute/path/d"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n paths<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"absolute/path/a"</span><span class="token punctuation">,</span> <span class="token string">"absolute/path/b"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="additionaldata"><code>additionalData</code><a href="#additionaldata" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <code>undefined</code></p>\n<p>Prepends <code>Less</code> code before the actual entry file.\nIn this case, the <code>less-loader</code> will not override the source but just <strong>prepend</strong> the entry\'s content.</p>\n<p>This is especially useful when some of your Less variables depend on the environment:</p>\n<blockquote>\n<p>ℹ 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.</p>\n</blockquote>\n<h4 id="string"><code>String</code><a href="#string" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n additionalData<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`@env: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function-1"><code>Function</code><a href="#function-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<h5 id="sync">Sync<a href="#sync" aria-hidden="true"><span class="icon icon-link"></span></a></h5>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n additionalData<span class="token punctuation">:</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// More information about available properties https://webpack.js.org/api/loaders/</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> resourcePath<span class="token punctuation">,</span> rootContext <span class="token punctuation">}</span> <span class="token operator">=</span> loaderContext<span class="token punctuation">;</span>\n <span class="token keyword">const</span> relativePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">relative</span><span class="token punctuation">(</span>rootContext<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>relativePath <span class="token operator">===</span> <span class="token string">"styles/foo.less"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token string">"@value: 100px;"</span> <span class="token operator">+</span> content<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token string">"@value: 200px;"</span> <span class="token operator">+</span> content<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h5 id="async">Async<a href="#async" aria-hidden="true"><span class="icon icon-link"></span></a></h5>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n additionalData<span class="token punctuation">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// More information about available properties https://webpack.js.org/api/loaders/</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> resourcePath<span class="token punctuation">,</span> rootContext <span class="token punctuation">}</span> <span class="token operator">=</span> loaderContext<span class="token punctuation">;</span>\n <span class="token keyword">const</span> relativePath <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">relative</span><span class="token punctuation">(</span>rootContext<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>relativePath <span class="token operator">===</span> <span class="token string">"styles/foo.less"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token string">"@value: 100px;"</span> <span class="token operator">+</span> content<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token string">"@value: 200px;"</span> <span class="token operator">+</span> content<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="sourcemap"><code>sourceMap</code><a href="#sourcemap" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: depends on the <code>compiler.devtool</code> value</p>\n<p>By default generation of source maps depends on the <a href="/configuration/devtool/"><code>devtool</code></a> option. All values enable source map generation except <code>eval</code> and <code>false</code> value.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="webpackimporter"><code>webpackImporter</code><a href="#webpackimporter" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: <code>true</code></p>\n<p>Enables/Disables the default <code>webpack</code> importer.</p>\n<p>This can improve performance in some cases. Use it with caution because aliases and <code>@import</code> at-rules starting with <code>~</code> will not work.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n webpackImporter<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="implementation"><code>implementation</code><a href="#implementation" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Object | String</code></p>\n<blockquote>\n<p>⚠ less-loader compatible with Less 3 and 4 versions</p>\n</blockquote>\n<p>The special <code>implementation</code> option determines which implementation of Less to use. Overrides the locally installed <code>peerDependency</code> version of <code>less</code>.</p>\n<p><strong>This option is only really useful for downstream tooling authors to ease the Less 3-to-4 transition.</strong></p>\n<h4 id="object-1">Object<a href="#object-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n implementation<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"less"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="string-1">String<a href="#string-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n implementation<span class="token punctuation">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"less"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="normal-usage">Normal usage<a href="#normal-usage" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Chain the <code>less-loader</code> with the <a href="/loaders/css-loader/"><code>css-loader</code></a> and the <a href="/loaders/style-loader/"><code>style-loader</code></a> to immediately apply all styles to the DOM.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token comment">// creates style nodes from JS strings</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token comment">// translates CSS into CommonJS</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span> <span class="token comment">// compiles Less to CSS</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Unfortunately, Less doesn\'t map all options 1-by-1 to camelCase. When in doubt, <a href="https://github.com/less/less.js/blob/3.x/bin/lessc">check their executable</a> and search for the dash-case option.</p>\n<h3 id="source-maps">Source maps<a href="#source-maps" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>To enable sourcemaps for CSS, you\'ll need to pass the <code>sourceMap</code> property in the loader\'s options. If this is not passed, the loader will respect the setting for webpack source maps, set in <code>devtool</code>.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n devtool<span class="token punctuation">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span> <span class="token comment">// any "source-map"-like devtool is possible</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>If you want to edit the original Less files inside Chrome, <a href="https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0">there\'s a good blog post</a>. The blog post is about Sass but it also works for Less.</p>\n<h3 id="in-production">In production<a href="#in-production" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Usually, it\'s recommended to extract the style sheets into a dedicated file in production using the <a href="/plugins/mini-css-extract-plugin/">MiniCssExtractPlugin</a>. This way your styles are not dependent on JavaScript.</p>\n<h3 id="imports">Imports<a href="#imports" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>First we try to use built-in <code>less</code> resolve logic, then <code>webpack</code> resolve logic (aliases and <code>~</code>).</p>\n<h4 id="webpack-resolver">Webpack Resolver<a href="#webpack-resolver" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><code>webpack</code> provides an <a href="/configuration/resolve/">advanced mechanism to resolve files</a>.\n<code>less-loader</code> applies a Less plugin that passes all queries to the webpack resolver if <code>less</code> could not resolve <code>@import</code>.\nThus you can import your Less modules from <code>node_modules</code>.</p>\n<pre><code class="hljs language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"bootstrap/less/bootstrap"</span><span class="token punctuation">;</span></span></code></pre>\n<p>Using <code>~</code> is deprecated and can be removed from your code (<strong>we recommend it</strong>), but we still support it for historical reasons.\nWhy you can removed it? The loader will first try to resolve <code>@import</code> as relative, if it cannot be resolved, the loader will try to resolve <code>@import</code> inside <a href="/configuration/resolve/#resolvemodules"><code>node_modules</code></a>.\nJust prepend them with a <code>~</code> which tells webpack to look up the <a href="/configuration/resolve/#resolvemodules"><code>modules</code></a>.</p>\n<pre><code class="hljs language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"~bootstrap/less/bootstrap"</span><span class="token punctuation">;</span></span></code></pre>\n<p>Default resolver options can be modified by <a href="/configuration/resolve/#resolvebydependency"><code>resolve.byDependency</code></a>:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n devtool<span class="token punctuation">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span> <span class="token comment">// any "source-map"-like devtool is possible</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n byDependency<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// More options can be found here https://webpack.js.org/configuration/resolve/</span>\n less<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n mainFiles<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"custom"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>It\'s important to only prepend it with <code>~</code>, because <code>~/</code> resolves to the home-directory. webpack needs to distinguish between <code>bootstrap</code> and <code>~bootstrap</code>, because CSS and Less files have no special syntax for importing relative files. Writing <code>@import "file"</code> is the same as <code>@import "./file";</code></p>\n<h4 id="less-resolver">Less Resolver<a href="#less-resolver" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>If you specify the <code>paths</code> option, modules will be searched in the given <code>paths</code>. This is <code>less</code> default behavior. <code>paths</code> should be an array with absolute paths:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.less$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n lessOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n paths<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"node_modules"</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="plugins">Plugins<a href="#plugins" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>In order to use <a href="http://lesscss.org/usage/#plugins">plugins</a>, simply set the <code>plugins</code> option like this:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> CleanCSSPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'less-plugin-clean-css\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'less-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n lessOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token keyword">new</span> <span class="token class-name">CleanCSSPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> advanced<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token operator">...</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<blockquote>\n<p>ℹ️ Access to the <a href="/api/loaders/#the-loader-context">loader context</a> inside the custom plugin can be done using the <code>pluginManager.webpackLoaderContext</code> property.</p>\n</blockquote>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n install<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>less<span class="token punctuation">,</span> pluginManager<span class="token punctuation">,</span> functions<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n functions<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"pi"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// Loader context is available in `pluginManager.webpackLoaderContext`</span>\n\n <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="extracting-style-sheets">Extracting style sheets<a href="#extracting-style-sheets" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or <a href="/concepts/hot-module-replacement/">hot module replacement</a> in development. In 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 <a href="https://en.wikipedia.org/wiki/Flash_of_unstyled_content">FOUC</a> might be visible. Thus it\'s often still better to have them as separate files in your final production build.</p>\n<p>There are two possibilities to extract a style sheet from the bundle:</p>\n<ul>\n<li><a href="https://github.com/peerigon/extract-loader"><code>extract-loader</code></a> (simpler, but specialized on the css-loader\'s output)</li>\n<li><a href="/plugins/mini-css-extract-plugin/">MiniCssExtractPlugin</a> (more complex, but works in all use-cases)</li>\n</ul>\n<h3 id="css-modules-gotcha">CSS modules gotcha<a href="#css-modules-gotcha" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>There is a known problem with Less and <a href="https://github.com/css-modules/css-modules">CSS modules</a> regarding relative file paths in <code>url(...)</code> statements. <a href="https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335">See this issue for an explanation</a>.</p>\n<h2 id="contributing">Contributing<a href="#contributing" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Please take a moment to read our contributing guidelines if you haven\'t yet done so.</p>\n<p><a href="https://github.com/webpack-contrib/less-loader/blob/master/.github/CONTRIBUTING.md">CONTRIBUTING</a></p>\n<h2 id="license">License<a href="#license" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p><a href="https://github.com/webpack-contrib/less-loader/blob/master/LICENSE">MIT</a></p>\n'}}]);