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，只需添加该选项即可。

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

Less is adding unwanted code on url when compiled to css

css

compilation

less

visual-studio

web-essentials