 \href{https://github.com/webpack/webpack}{\texttt{  }} 

\href{https://npmjs.com/package/less-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/webpack-contrib/less-loader}{\texttt{ }} \href{https://github.com/webpack-contrib/less-loader/actions}{\texttt{ }} \href{https://codecov.io/gh/webpack-contrib/less-loader}{\texttt{ }} \href{https://gitter.im/webpack/webpack}{\texttt{ }} \href{https://packagephobia.now.sh/result?p=less-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15966}{}\doxysection{less-\/loader}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15966}
A Less loader for webpack. Compiles Less to CSS.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15967}{}\doxysubsection{Getting Started}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15967}
To begin, you\textquotesingle{}ll need to install {\ttfamily less-\/loader}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npm install less-\/loader -\/-\/save-\/dev }

\end{DoxyCode}


Then add the loader to your {\ttfamily webpack} config. For example\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        loader: 'less-\/loader', // compiles Less to CSS}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


And run {\ttfamily webpack} via your preferred method.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15968}{}\doxysubsection{Options}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15968}
\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering $\ast$$\ast$\href{\#lessoptions}{\texttt{ {\ttfamily less\+Options}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Object\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily \{ relative\+Urls\+: true \}}   &Options for Less.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#prependdata}{\texttt{ {\ttfamily prepend\+Data}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Prepends Less code before the actual entry file.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#appenddata}{\texttt{ {\ttfamily append\+Data}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Prepends Less code after the actual entry file.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#sourcemap}{\texttt{ {\ttfamily source\+Map}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily compiler.\+devtool}   &Enables/\+Disables generation of source maps.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#implementation}{\texttt{ {\ttfamily implementation}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Object\}}   &\PBS\centering {\ttfamily less}   &Setup Less implementation to use.   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15969}{}\doxysubsubsection{$<$tt$>$less\+Options$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15969}
Type\+: {\ttfamily Object$\vert$\+Function} Default\+: {\ttfamily \{ relative\+Urls\+: true \}}

You can pass any Less specific options to the {\ttfamily less-\/loader} through the {\ttfamily less\+Options} property in the \href{https://webpack.js.org/configuration/module/\#rule-options-rule-query}{\texttt{ loader options}}. See the \href{http://lesscss.org/usage/\#command-line-usage-options}{\texttt{ Less documentation}} for all available options in dash-\/case. Since we\textquotesingle{}re passing these options to Less programmatically, you need to pass them in camel\+Case here\+:\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15970}{}\doxyparagraph{$<$tt$>$\+Object$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15970}
Use an object to pass options through to Less.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              lessOptions: \{}
\DoxyCodeLine{                strictMath: true,}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15971}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15971}
Allows setting the options passed through to Less based off of the loader context.


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              lessOptions: (loaderContext) => \{}
\DoxyCodeLine{                // More information about available properties https://webpack.js.org/api/loaders/}
\DoxyCodeLine{                const \{ resourcePath, rootContext \} = loaderContext;}
\DoxyCodeLine{                const relativePath = path.relative(rootContext, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{                if (relativePath === 'styles/foo.less') \{}
\DoxyCodeLine{                  return \{}
\DoxyCodeLine{                    paths: ['absolute/path/c', 'absolute/path/d'],}
\DoxyCodeLine{                  \};}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                return \{}
\DoxyCodeLine{                  paths: ['absolute/path/a', 'absolute/path/b'],}
\DoxyCodeLine{                \};}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15972}{}\doxysubsubsection{$<$tt$>$prepend\+Data$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15972}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: {\ttfamily undefined}

Prepends {\ttfamily Less} code before the actual entry file.

This is especially useful when some of your Less variables depend on the environment\+:

\begin{quote}
ℹ Since you\textquotesingle{}re injecting code, this will break the source mappings in your entry file. Often there\textquotesingle{}s a simpler solution than this, like multiple Less entry files. \end{quote}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15973}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15973}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              prependData: `@env: \$\{process.env.NODE\_ENV\};`,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15974}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15974}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              prependData: (loaderContext) => \{}
\DoxyCodeLine{                // More information about available properties https://webpack.js.org/api/loaders/}
\DoxyCodeLine{                const \{ resourcePath, rootContext \} = loaderContext;}
\DoxyCodeLine{                const relativePath = path.relative(rootContext, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{                if (relativePath === 'styles/foo.less') \{}
\DoxyCodeLine{                  return '@value: 100px;';}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                return '@value: 200px;';}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15975}{}\doxysubsubsection{$<$tt$>$append\+Data$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15975}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: {\ttfamily undefined}

Append\+Data {\ttfamily Less} code after the actual entry file.

This can be useful when you need to rewrite some of your Less variables.\+:

\begin{quote}
ℹ Since you\textquotesingle{}re injecting code, this will break the source mappings in your entry file. Often there\textquotesingle{}s a simpler solution than this, like multiple Less entry files. \end{quote}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15976}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15976}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              appendData: `@env: \$\{process.env.NODE\_ENV\};`,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15977}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15977}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              appendData: (loaderContext) => \{}
\DoxyCodeLine{                // More information about available properties https://webpack.js.org/api/loaders/}
\DoxyCodeLine{                const \{ resourcePath, rootContext \} = loaderContext;}
\DoxyCodeLine{                const relativePath = path.relative(rootContext, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{                if (relativePath === 'styles/foo.less') \{}
\DoxyCodeLine{                  return '@value: 100px;';}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                return '@value: 200px;';}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15978}{}\doxysubsubsection{$<$tt$>$source\+Map$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15978}
Type\+: {\ttfamily Boolean} Default\+: depends on the {\ttfamily compiler.\+devtool} value

By default generation of source maps depends on the \href{https://webpack.js.org/configuration/devtool/}{\texttt{ {\ttfamily devtool}}} option. All values enable source map generation except {\ttfamily eval} and {\ttfamily false} value.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15979}{}\doxysubsubsection{$<$tt$>$implementation$<$/tt$>$}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15979}
Type\+: {\ttfamily Object} Default\+: {\ttfamily less}

\begin{quote}
⚠ less-\/loader compatible with Less version 3 only \end{quote}
The special {\ttfamily implementation} option determines which implementation of Less to use. The {\ttfamily implementation} options either accepts {\ttfamily less} as a module. This is useful if you want to use Less with a smaller version. Do not forget that then you must install your own version of Less.

For example, to use custom Less implementation, you\textquotesingle{}d pass\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              implementation: require('less'),}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15980}{}\doxysubsection{Examples}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15980}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15981}{}\doxysubsubsection{Normal usage}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15981}
Chain the {\ttfamily less-\/loader} with the \href{https://github.com/webpack-contrib/css-loader}{\texttt{ {\ttfamily css-\/loader}}} and the \href{https://github.com/webpack-contrib/style-loader}{\texttt{ {\ttfamily style-\/loader}}} to immediately apply all styles to the DOM.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader', // creates style nodes from JS strings}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader', // translates CSS into CommonJS}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader', // compiles Less to CSS}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Unfortunately, Less doesn\textquotesingle{}t map all options 1-\/by-\/1 to camel\+Case. When in doubt, \href{https://github.com/less/less.js/blob/3.x/bin/lessc}{\texttt{ check their executable}} and search for the dash-\/case option.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15982}{}\doxysubsubsection{Source maps}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15982}
To enable sourcemaps for CSS, you\textquotesingle{}ll need to pass the {\ttfamily source\+Map} property in the loader\textquotesingle{}s options. If this is not passed, the loader will respect the setting for webpack source maps, set in {\ttfamily devtool}.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  devtool: 'source-\/map', // any "{}source-\/map"{}-\/like devtool is possible}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


If you want to edit the original Less files inside Chrome, \href{https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0}{\texttt{ there\textquotesingle{}s a good blog post}}. The blog post is about Sass but it also works for Less.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15983}{}\doxysubsubsection{In production}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15983}
Usually, it\textquotesingle{}s recommended to extract the style sheets into a dedicated file in production using the \href{https://github.com/webpack-contrib/mini-css-extract-plugin}{\texttt{ Mini\+Css\+Extract\+Plugin}}. This way your styles are not dependent on Java\+Script.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15984}{}\doxysubsubsection{Imports}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15984}
Starting with {\ttfamily less-\/loader} 4, you can now choose between Less\textquotesingle{} builtin resolver and webpack\textquotesingle{}s resolver. By default, webpack\textquotesingle{}s resolver is used.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15985}{}\doxyparagraph{webpack resolver}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15985}
webpack provides an \href{https://webpack.js.org/configuration/resolve/}{\texttt{ advanced mechanism to resolve files}}. The {\ttfamily less-\/loader} applies a Less plugin that passes all queries to the webpack resolver. Thus you can import your Less modules from {\ttfamily node\+\_\+modules}. Just prepend them with a {\ttfamily $\sim$} which tells webpack to look up the \href{https://webpack.js.org/configuration/resolve/\#resolve-modules}{\texttt{ {\ttfamily modules}}}.


\begin{DoxyCode}{0}
\DoxyCodeLine{@import '\string~bootstrap/less/bootstrap'; }

\end{DoxyCode}


It\textquotesingle{}s important to only prepend it with {\ttfamily $\sim$}, because {\ttfamily $\sim$/} resolves to the home-\/directory. webpack needs to distinguish between {\ttfamily bootstrap} and {\ttfamily $\sim$bootstrap}, because CSS and Less files have no special syntax for importing relative files. Writing {\ttfamily @import \char`\"{}file\char`\"{}} is the same as {\ttfamily @import \char`\"{}./file\char`\"{};}

\label{md_sfcode_node_modules_less_loader_README_autotoc_md15986}%
\Hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15986}%
\doxysubparagraph*{Non-\/\+Less imports}

Using webpack\textquotesingle{}s resolver, you can import any file type. You just need a loader that exports valid Less code. Often, you will also want to set the {\ttfamily issuer} condition to ensure that this rule is only applied on imports originating from Less files\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{// webpack.config.js}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).js\$/,}
\DoxyCodeLine{        issuer: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'js-\/to-\/less-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15987}{}\doxyparagraph{Less resolver}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15987}
If you specify the {\ttfamily paths} option, modules will be searched in the given {\ttfamily paths}. This is Less\textquotesingle{} default behavior. {\ttfamily paths} should be an array with absolute paths\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).less\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'less-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              lessOptions: \{}
\DoxyCodeLine{                paths: [path.resolve(\_\_dirname, 'node\_modules')],}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15988}{}\doxysubsubsection{Plugins}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15988}
In order to use \href{http://lesscss.org/usage/\#plugins}{\texttt{ plugins}}, simply set the {\ttfamily plugins} option like this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{// webpack.config.js}
\DoxyCodeLine{const CleanCSSPlugin = require('less-\/plugin-\/clean-\/css');}
\DoxyCodeLine{}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  ...}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      loader: 'less-\/loader',}
\DoxyCodeLine{      options: \{}
\DoxyCodeLine{        lessOptions: \{}
\DoxyCodeLine{          plugins: [}
\DoxyCodeLine{            new CleanCSSPlugin(\{ advanced: true \}),}
\DoxyCodeLine{          ],}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    \},}
\DoxyCodeLine{  ...}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15989}{}\doxysubsubsection{Extracting style sheets}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15989}
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or \href{https://webpack.js.org/concepts/hot-module-replacement/}{\texttt{ hot module replacement}} in development. In production, on the other hand, it\textquotesingle{}s not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a \href{https://en.wikipedia.org/wiki/Flash_of_unstyled_content}{\texttt{ FOUC}} might be visible. Thus it\textquotesingle{}s often still better to have them as separate files in your final production build.

There are two possibilities to extract a style sheet from the bundle\+:


\begin{DoxyItemize}
\item \href{https://github.com/peerigon/extract-loader}{\texttt{ {\ttfamily extract-\/loader}}} (simpler, but specialized on the css-\/loader\textquotesingle{}s output)
\item \href{https://github.com/webpack-contrib/mini-css-extract-plugin}{\texttt{ Mini\+Css\+Extract\+Plugin}} (more complex, but works in all use-\/cases)
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15990}{}\doxysubsubsection{CSS modules gotcha}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15990}
There is a known problem with Less and \href{https://github.com/css-modules/css-modules}{\texttt{ CSS modules}} regarding relative file paths in {\ttfamily url(...)} statements. \href{https://github.com/webpack-contrib/less-loader/issues/109\#issuecomment-253797335}{\texttt{ See this issue for an explanation}}.\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15991}{}\doxysubsection{Contributing}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15991}
Please take a moment to read our contributing guidelines if you haven\textquotesingle{}t yet done so.

./.github/\+CONTRIBUTING.\+md \char`\"{}\+CONTRIBUTING\char`\"{}\hypertarget{md_sfcode_node_modules_less_loader_README_autotoc_md15992}{}\doxysubsection{License}\label{md_sfcode_node_modules_less_loader_README_autotoc_md15992}
\href{./LICENSE}{\texttt{ MIT}} 