Error transferring global var to LESS file using Webpack and less-loader

Question

I use webpack and less-loader in my project, and in my webpack configuration I am trying to pass a global variable that will be used in my smaller files. This part of the configuration is below:

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

The configuration file I refer to above is the json file below:

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

The following is a snippet of a smaller file (let him call it file.less) that uses this staticDirglobal 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

Two errors that I'm trying to debug are:

• According to the error, my configuration value https://myendpoint.comis equally parsed ashttps:/myendpoint.com
• less-loader resolves my relative directory endpoint

, webpack .

: staticDir "'https://myendpoint.com'", "https://myendpoint.com" Module build failed: Unrecognised input.