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全局变量的较少文件的一部分（让我们称之为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错误。

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

0 个答案: