在 Webpack 的 less-loader 之前预处理 LESS

Question

我需要能够对为编译而引入的 .less 文件应用一些预处理（字符串替换），但在 less-loader 应用它自己的处理之前。

最初我认为我可以做到：

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

但是，观察 string-replace-loader 的输入表明它只是一个文件名列表，这显然是行不通的。

我希望我可以用 raw-loader 做一些事情，并在预处理后将输出传送到 less-loader，但我不确定如何告诉后者接受原始输入而不是文件。

Answer 1

我想我已经弄明白了。我最终翻遍了 less 编译器的源代码，以查看它期望的插件格式。

下面的代码伪造了一个完整的插件，只提供了基本的必需方法。它目前只进行单个字符串替换（可能是正则表达式），但当然可以根据需要进行交换。

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
                }
            }
        ]
    }
}]

理想情况下，这将被移出配置文件，尤其是当它变大时。

在 Webpack 的 less-loader 之前预处理 LESS

Pre-processing LESS before less-loader in Webpack

webpack

less-loader