从webpack传递较少的变量 [英] Passing less variables from webpack

问题描述

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

I'm trying to pass less variables within a webpack configuration to the less loader, naturally. For some reason the variable is not being passed ok. I can't figure the correct syntax.

该变量具有动态内容，该内容在构建时在webpack配置文件中确定。这是相关的一行（我尝试了很多变化）：

The variable has a dynamic content that is determined at the build time, in the webpack config file. This is the relevant line (I've tried many variations of it):

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

在上面的例子中，一些pathPrefix是在构建时确定的，我们希望将其值传递给更少的上下文，它将在url（）css指令中使用。

In the above example some pathPrefix is being determined at build time and we want to pass its value into less context, where it will be used in url() css directives.

上述情况不起作用 - 没有任何内容传递给less，并且less中定义的默认变量值适用。

The above doesn't work - nothing is passed into less, and the default variable value defined in less applies.

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

Can anyone show how to correctly pass the value into the less compilation process? Thanks!

推荐答案

所以这很艰难，但我们终于让它发挥作用（！）。 Arggh - 花了很多时间来尝试和弄清楚语法。

So it was tough but we finally made it work(!). Arggh - so much time invested to trying and figure out the syntax.

这是任务：我们希望在构建时确定一个应该用作基本URL的路径对于较少文件中的misc资产（背景图像，使用url（）较少的函数）。

Here's the task: we want at build time to determine a path that should use used as the base url for misc assets in less files (background images, using url() less function).

首先，我们确定了webpack配置文件中的路径。它简单的JS，但路径字符串的转义模式绝对是疯了。我们可能就此投入了小时。的惊人即可。这是：

First, we determined the path in webpack config file. Its plain JS, but the escaping pattern for the path string was absolutely nuts. We probably invested hours just on this. Amazing. Here it is:

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

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

Next is the loader configuration for less files, using the assetsPath prefix set above:

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

请注意在加载程序配置中使用assetsPath的情况下的转义模式。

Notice the escaping pattern above where using the assetsPath in the loader configuration.

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

Next, you need to make sure that an empty variable is being defined in the less files. We initialized it in our 'vars.less' file, with:

@assetspath: '';

最后，在任何相关的类中，我们可以使用在构建时间中传递的值，如下所示： / p>

Finally, in any relevant class, we can use the value being passed in build time like this:

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

这篇关于从webpack传递较少的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！