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 +'\'"}}'
}

注意上面使用assets配置中的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
        } 
    }

Answer 3

这是解决这种情况的另一种方法，但我们设法通过将每个加载CSS文件的资源转换为Base64来使事情发挥作用。我们必须这样做，因为找出资源的主机名可能比webpack配置文件更晚。

从webpack传递较少的变量

3 个答案: