Pre-processing LESS before less-loader in Webpack

Question

I need to be able to apply some pre-processing (a string replace) to .less files that are pulled in for compile, but before the less-loader applies its own processing.

Initially I thought I could do:

test: /\.less/, include: /SomeDir/, use: ['style-loader', 'css-loader', 'less-loader', {
  loader: 'string-replace-loader', options: { /* ... */ }
}]

However, observing the input to string-replace-loader shows it's just a list of filenames, which obviously won't work.

I'm hoping I can do something with raw-loader and pipe the output into less-loader after the pre-processing, but I'm not sure how to tell the latter to accept raw input instead of the files.

Answer 1

I think that I've figured this one out. I ended up rummaging through the source of the less compiler to see what plugin format it expects.

The code below fakes a full plugin, and just provides the basic required methods. It currently does a single string replace (possible regex), but of course can be swapped for whatever you need.

test: /\.less/, include: /SomeDir/, use: ['style-loader', 'css-loader', {
    loader: 'less-loader',
    options: {
        plugins: [
            {
                install: (lessObj, pluginManager) => {
                    pluginManager.addPreProcessor({
                        process: function (lessCode) {
                            return lessCode.replace('Replace this', 'With this');
                        }
                    }, 2000); // 2000 sets priority to come after less imports, per code comments
                }
            }
        ]
    }
}]

Ideally, this would be moved out of the config file, especially if it gets larger.