从webpack传递较少的变量

Question

我试图将webpack配置中较少的变量传递给较少的加载器,当然.由于某种原因,变量没有被传递好.我无法弄清楚正确的语法.

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

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

在上面的示例中,一些pathPrefix正在构建时确定,我们希望将其值传递给较少的上下文,其中它将在url()css指令中使用.

以上操作无效 - 没有任何内容传递给less,并且less中定义的默认变量值适用.

任何人都可以展示如何正确地将值传递给较少的编译过程？谢谢!

Answer 1

所以这很艰难,但我们终于让它发挥作用了(!).Arggh - 花了很多时间来尝试和弄清楚语法.

这是任务:我们希望在构建时确定一个路径,该路径应该用作较少文件中misc资产的基本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 +'\'"}}'
}

注意上面的转义模式在loader配置中使用assetsPath.

接下来,您需要确保在less文件中定义了一个空变量.我们在'vars.less'文件中初始化它,包括:

@assetspath: '';

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

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

Answer 2

您可以尝试使用query加载器的部分：

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