Error passing global var to LESS file with Webpack and less-loader

Question

I am using webpack and less-loader in my project, and in my webpack config I am trying to pass a global variable to be used in my less files. That portion of the config is below:

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

The config file I am referencing above is the json file below:

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

Below is a portion of the less file (let's call it file.less) that is using this staticDir global var:

button.slick-prev {
    left: 5px;

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

However, when my assets are bundled I get the following error:

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

The two errors I am trying to debug:

• According to the error my config value https://myendpoint.com is parsed as https:/myendpoint.com
• less-loader is resolving my endpoint to a relative directory

When I hardcode my endpoint into the less file, webpack bundles my assets fine.

One final note: I set staticDir in my config to "'https://myendpoint.com'" because bundling with "https://myendpoint.com" yields a Module build failed: Unrecognised input error.