5

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

4

0 回答 0