A Less loader for webpack. Compiles Less to CSS.
To begin, you'll need to install
$ npm install less-loader --save-dev
Then add the loader to your
webpack config. For example:
moduleexports =module:rules:test: /\.less$/loader: 'less-loader' // compiles Less to CSS;
webpack via your preferred method.
moduleexports =module:rules:test: /\.less$/use:loader: 'style-loader' // creates style nodes from JS stringsloader: 'css-loader' // translates CSS into CommonJSloader: 'less-loader' // compiles Less to CSS;
You can pass any Less specific options to the
less-loader via loader options.
See the Less documentation
for all available options in dash-case. Since we're passing these options to
Less programmatically, you need to pass them in camelCase here:
moduleexports =module:rules:test: /\.less$/use:loader: 'style-loader'loader: 'css-loader'loader: 'less-loader'options:strictMath: truenoIeCompat: true;
Unfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, check their executable and search for the dash-case option.
less-loader 4, you can now choose between Less' builtin resolver
and webpack's resolver. By default, webpack's resolver is used.
webpack provides an
advanced mechanism to resolve files.
less-loader applies a Less plugin that passes all queries to the webpack
resolver. Thus you can import your Less modules from
prepend them with a
~ which tells webpack to look up the
It's important to only prepend it with
~/ resolves to the
home-directory. webpack needs to distinguish between
~bootstrap, because CSS and Less files have no special syntax for importing
relative files. Writing
@import "file" is the same as
Using webpack'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
condition to ensure that this rule is only applied on imports originating from
// webpack.config.jsmoduleexports =module:rules:test: /\.js$/issuer: /\.less$/use:loader: 'js-to-less-loader';
If you specify the
paths option, the
less-loader will not use webpack's
resolver. Modules, that can't be resolved in the local folder, will be searched
in the given
paths. This is Less' default behavior.
paths should be an array
with absolute paths:
moduleexports =module:rules:test: /\.less$/use:loader: 'style-loader'loader: 'css-loader'loader: 'less-loader'options:paths: path;
In this case, all webpack features like importing non-Less files or aliasing won't work of course.
In order to use plugins, simply set the
plugins option like this:
// webpack.config.jsconst CleanCSSPlugin = ;moduleexports =...loader: 'less-loader' options:plugins:advanced: true...;
Extracting style sheets
Bundling CSS with webpack has some nice advantages like referencing images and fonts with hashed urls or hot module replacement 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 FOUC might be visible. Thus it'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:
extract-loader(simpler, but specialized on the css-loader's output)
- MiniCssExtractPlugin (more complex, but works in all use-cases)
To enable CSS source maps, you'll need to pass the
sourceMap option to the
less-loader and the
webpack.config.js should look
moduleexports =module:rules:test: /\.less$/use:loader: 'style-loader'loader: 'css-loader'options:sourceMap: trueloader: 'less-loader'options:sourceMap: true;
Also checkout the sourceMaps example.
If you want to edit the original Less files inside Chrome, there's a good blog post. The blog post is about Sass but it also works for Less.
CSS modules gotcha
Please take a moment to read our contributing guidelines if you haven't yet done so.