javascript - 从webpack传递较少的变量

我试图自然地将webpack配置中的较少变量传递给较少的加载器。
由于某种原因，该变量未正确传递。我找不到正确的语法。

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

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

在上面的示例中，在构建时确定了一些pathPrefix，我们希望将其值传递到较少的上下文中，该上下文将在url()css指令中使用。

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

谁能说明如何正确地将值传递到较少的编译过程中？谢谢!

最佳答案

所以这很艰难，但我们终于使其起作用了(!)。 Arggh-花费大量时间来尝试找出语法。

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

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

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

接下来是使用上面设置的assetsPath前缀的较少文件的加载程序配置:

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

请注意上面的转义模式，该模式在装入程序配置中使用assetsPath。

接下来，您需要确保在较少的文件中定义了一个空变量。我们使用以下代码在“vars.less”文件中对其进行了初始化:

@assetspath: '';

最后，在任何相关的类中，我们都可以使用在构建时传递的值，如下所示:

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