css - Less 是在编译为 css 时在 url 上添加不需要的代码

Question

所以我有这样的东西:

@color1: rgba(0, 0, 0, 0);
@color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
    .imageGradientOverlay(@color1, @color2, "../images/start/start1.jpg");
}

这里的变量是:

.imageGradientOverlay(@color1, @color2, @url-image) {
    background-image: 
        linear-gradient(@color1, @color2), 
        url(@url-image);

    background-image: 
        -webkit-linear-gradient(@color1, @color2), 
        url(@url-image);
}

编译后的代码如下所示:

#start-view .start1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}

问题是 - 为什么在编译时添加了两个 ../../ ？

如果我尝试添加此 /images/start/start1.jpg 代码编译正常，但这不是我需要的。

Answer 1

查看 LESS options ，我相信您已将 rootpath 设置为添加该前缀。所以重置 rootpath 应该没问题。

您可以在这里测试 - LESS2CSS ，只需添加该选项即可。