javascript - 从 webpack 传递 less 变量

Question

我正在尝试将 webpack 配置中的 less 变量自然地传递给 less 加载器。由于某种原因，变量未正常传递。我想不出正确的语法。

该变量具有在构建时在 webpack 配置文件中确定的动态内容。这是相关的行(我已经尝试过它的许多变体):

loader: 'style!css?-minimize!less?-minimize&{modifyVars:{"resources-path-prefix":"' + pathPrefix + '"}}'

在上面的示例中，一些路径前缀在构建时被确定，我们希望将其值传递到 less 上下文中，它将在 url() css 指令中使用。

上面的方法不起作用 - 没有任何东西被传递到 less，并且应用 less 中定义的默认变量值。

谁能展示如何正确地将值传递给 less 编译过程？谢谢!

Answer 1

所以这很艰难，但我们终于成功了(!)。 Arggh - 投入了太多时间来尝试和弄清楚语法。

这是任务:我们希望在构建时确定一个路径，该路径应该用作 less 文件中 misc Assets 的基本 url(背景图像，使用 url() less 函数)。

首先，我们确定了 webpack 配置文件中的路径。它是普通的 JS，但路径字符串的转义模式绝对是疯了。我们可能为此投入了小时。 太棒了。在这里:

var assetsPath = (someCondition) ? '/assets' : "\\/127.0.0.1:8080/assets";

接下来是less文件的loader配置，使用上面设置的assetsPath前缀:

{
    test: /\.less$/,
    exclude: /node_modules/,
    loader: 'style!css?minimize=false!less?{"modifyVars":{"assetspath":"\'' + assetsPath +'\'"}}'
}

请注意上面的转义模式，其中在加载程序配置中使用了 assetsPath。

接下来，您需要确保在 less 文件中定义了一个空变量。我们在我们的“vars.less”文件中初始化它，使用:

@assetspath: '';

最后，在任何相关类中，我们可以像这样使用在构建时传递的值:

background-image: url("@{assetspath}/images/facebook.png");