Question

我需要能够对.less文件进行一些预处理（字符串替换），这些文件将被拉入进行编译，但是在clip应用其自身的处理之前。

最初我以为我可以做到：

less-loader

但是，观察到test: /\.less/, include: /SomeDir/, use: ['style-loader', 'css-loader', 'less-loader', { loader: 'string-replace-loader', options: { /* ... */ } }]的输入表明它只是文件名列表，显然是行不通的。

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

Answer 1

我认为我已经弄明白了。最后，我翻阅了较少编译器的源代码，以查看其期望的插件格式。

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

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进行预处理

1 个答案: