我在我的项目中使用 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
错误。