less-loader loads LESS (a type of CSS) scripts. You should install this in the usual way using the command line—for example, npm i less-loader. For the uninitiated, LESS is a more syntactically succinct form of CSS that is useful for backward compatibility.

You should chain less-loader with css-loader and style-loader to immediately apply all styles to the document. To configure this, use the following example code using the webpack.config.js file:

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

You can pass any LESS-specific options to the less-loader through the loader options. Since these options are passed to LESS as part of the program, they will need to be passed in camelCase; the following example in webpack.config.js shows how this is done:

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

Note that LESS won't map all options to camelCase individually. It is recommended that you check the relevant executable and search for the dash-case option.

When in production mode, it is usually recommended that you extract the style sheets into a dedicated file using MiniCssExtractPlugin. This way, your styles are not dependent on JavaScript (more on this later).

In this section, we have discussed loaders in depth and also made a detailed examination of some of the more useful ones. Most loaders follow the same logic of installation and configuration and are built by the Webpack community, rather than by Webpack themselves. We'll discuss custom loaders in more detail in the final chapter of this book.

There are too many other loaders to mention here, but this gives you a very solid foundation to work with them in all sorts of imaginative ways. Something that is related to the non-native script that loaders tend to handle is the use of APIs with Webpack. We'll investigate this in the next section.