less-loader

What is less-loader?

The less-loader npm package is a loader for webpack that allows you to preprocess Less files into CSS. This enables developers to write styles in Less, a dynamic preprocessor style language that extends CSS with dynamic behavior such as variables, mixins, operations, and functions, and compile them into native CSS files that can be loaded into a web page.

What are less-loader's main functionalities?

Compiling Less to CSS

This feature allows you to compile Less files into CSS. The code sample shows how to configure webpack to use less-loader along with css-loader and style-loader to process `.less` files.

module.exports = {
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }]
  }
};

Importing Other Less or CSS Files

less-loader supports importing other Less or CSS files within a Less file. This feature enables code reusability and modularization. The code sample demonstrates importing a 'library' file and using a variable from it.

@import 'library';

.body {
  color: @baseColor;
}

Customizing Less Options

This feature allows the customization of Less compiler options through less-loader. The code sample demonstrates how to enable strict math and disable IE compatibility mode by configuring less-loader options in webpack.

module.exports = {
  module: {
    rules: [{
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              strictMath: true,
              noIeCompat: true
            }
          }
        }
      ]
    }]
  }
};

Other packages similar to less-loader

sass-loader

sass-loader is similar to less-loader but for compiling Sass/SCSS files into CSS. While less-loader focuses on Less files, sass-loader provides functionality for Sass, another popular CSS preprocessor language. Both loaders serve a similar purpose of integrating CSS preprocessing into webpack's build process.

stylus-loader

stylus-loader is designed for processing Stylus files into CSS, similar to how less-loader works with Less files. Stylus is another CSS preprocessor that offers syntax and features comparable to Less and Sass. The choice between less-loader, sass-loader, and stylus-loader typically depends on the specific preprocessor language a project uses.

postcss-loader

postcss-loader is a loader that allows you to use PostCSS, a tool for transforming CSS with JavaScript plugins. Unlike less-loader which is specific to Less, postcss-loader is more flexible and can be used to apply a wide range of transformations and optimizations to CSS files, making it a powerful tool in a developer's workflow.

README

less loader for webpack

Installation

npm install less-loader --save-dev

Usage

Documentation: Using loaders

var css = require("!raw!less!./file.less");
// => returns compiled css code from file.less, resolves imports
var css = require("!css!less!./file.less");
// => returns compiled css code from file.less, resolves imports and url(...)s

Use in tandem with the style-loader to add the css rules to your document:

require("!style!css!less!./file.less");

webpack config

module.exports = {
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: "style!css!less"
      }
    ]
  }
};

Then you only need to write: require("./file.less")

LESS options

You can pass any LESS specific configuration options through to the render function via query parameters.

module.exports = {
  module: {
    loaders: [
      {
        test: /\.less$/,
        loader: "style!css!less?strictMath&noIeCompat"
      }
    ]
  }
};

See the LESS documentation for all available options. LESS translates dash-case to camelCase. Certain options which take values (e.g. lessc --modify-var="a=b") are better handled with the JSON loader syntax (style!css!less?{"modifyVars":{"a":"b"}}).

LESS plugins

In order to use plugins, simply set the lessLoader.lessPlugins-option on your webpack options. You can also change the options' key with a query parameter: "less?config=lessLoaderCustom".

var LessPluginCleanCSS = require('less-plugin-clean-css');

module.exports = {
  ...
  lessLoader: {
    lessPlugins: [
      new LessPluginCleanCSS({advanced: true})
    ]
  }
};

Imports

webpack provides an advanced mechanism to resolve files. The less-loader stubs less' fileLoader and passes all queries to the webpack resolving engine. Thus you can import your less-modules from node_modules. Just prepend them with a ~ which tells webpack to look-up the modulesDirectories

@import "~bootstrap/less/bootstrap";

It's important to only prepend it with ~, because ~/ resolves to the home-directory. webpack needs to distinguish between bootstrap and ~bootstrap because css- and less-files have no special syntax for importing relative files. Writing @import "file" is the same as @import "./file";

Source maps

Because of browser limitations, source maps are only available in conjunction with the extract-text-webpack-plugin. Use that plugin to extract the CSS code from the generated JS bundle into a separate file (which even improves the perceived performance because JS and CSS are loaded in parallel).

Then your webpack.config.js should look like this:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    ...
    // must be 'source-map' or 'inline-source-map'
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract(
                    // activate source maps via loader query
                    'css?sourceMap!' +
                    'less?sourceMap'
                )
            }
        ]
    },
    plugins: [
        // extract inline css into separate 'styles.css'
        new ExtractTextPlugin('styles.css')
    ]
};

If you want to view the original LESS files inside Chrome and even edit it, there's a good blog post. Checkout test/sourceMap for a running example. Make sure to serve the content with an HTTP server.

Contribution

Don't hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test.

The tests are basically just comparing the generated css with a reference css-file located under test/css. You can easily generate a reference css-file by calling node test/helpers/generateCss.js <less-file-without-less-extension>. It passes the less-file to less and writes the output to the test/css-folder.

License

MIT (http://www.opensource.org/licenses/mit-license.php)