javascript - Webpackとless-loaderを使用してグローバル変数を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以下は、このグローバル varを使用している 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

デバッグしようとしている 2 つのエラー:

• エラーによると、私の設定値https://myendpoint.comは次のように解析されますhttps:/myendpoint.com
• less-loader がエンドポイントを相対ディレクトリに解決しています

エンドポイントをより少ないファイルにハードコードすると、webpack はアセットを適切にバンドルします。

最後の注意: とバンドルするとエラーが発生するため、設定staticDirで を設定しました。"'https://myendpoint.com'""https://myendpoint.com"Module build failed: Unrecognised input