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.
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.