npm - Webpack 设置以允许 LESS 覆盖在导入的 NPM 模块中生效

Question

我正在开发一个使用 webpack 捆绑的应用程序。该应用程序由托管在私有 NPM 注册表中的多个 NPM 模块构建而成。其中一些模块从Bootstrap导入 LESS 变量：

// my-module-stylesheet.less
@import (reference) "~bootstrap/less/variables.less";

.widget {
    background:  @brand-primary;
}

当模块被编译时，这个 LESS 代码被编译成 CSS 并与模块的 JavaScript 文件捆绑在一起（使用less-loader）。

这很好用，除非我的主应用程序在其自己的 LESS 文件中覆盖了 Bootstrap 的默认样式：

// my-app-stylesheet.less
@brand-primary: #d9534f; // red

这些覆盖仅适用于在我的应用程序中直接定义的样式，因为模块中定义的任何样式都已预编译为 CSS。因此，模块中定义的任何组件都不会反映我的主应用程序中定义的覆盖。

这是对该问题的更直观的解释：

如何为我的 NPM 模块和我的 Web 应用程序设置我的 webpack 构建，以允许适用于导入模块的应用程序级 LESS 覆盖？