使用Webpack和less-loader将全局var传递到LESS文件时出错

Question

我在我的项目中使用webpack和less-loader，在我的webpack配置中，我试图传递一个全局变量以在我的less文件中使用。该部分配置如下：

module: {
    loaders: [
        {
            test: /\.less$/,
            loader: 'style!css!less?'+JSON.stringify(
                {globalVars: {staticDir: config.staticDir}}
            )
        }
    ]
}

我上面引用的配置文件是下面的json文件：

{
    "staticDir": "'https://myendpoint.com'"
}

以下是使用此staticDir全局变量的less文件的一部分（我们称其为file.less）：

button.slick-prev {
    left: 5px;

    &:before {
        url('@{staticDir}/images/some_image.svg');
    }
}

但是，当我的资产捆绑在一起时，会出现以下错误：

ERROR in ./~/css-loader!./~/less-loader?{"globalVars":{"staticDir":"'https:/myendpoint.com'"}}!./path/to/file.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./https:/myendpoint.com/images/some_image.svg in /Users/me/myprojects
 @ ./~/css-loader!./~/less-loader?{"globalVars":{"staticDir":"'https:/myendpoint.com'"}}!./path/to/file.less 7:217947-218035

我正在尝试调试的两个错误：

• 根据错误我的配置值https://myendpoint.com被解析为https:/myendpoint.com
• less-loader正在将我的端点解析为相对目录

当我将端点硬编码到less文件中时，webpack会很好地打包我的资产。

最后一点：我staticDir在配置中设置为，"'https://myendpoint.com'"因为与绑定会"https://myendpoint.com"产生Module build failed: Unrecognised input错误。