没有正确导入带有网址的文件 [英] LESS incorrectly importing files with URLs

问题描述

似乎LESS的URL导入策略不考虑与CSS相同的相对路径。

test.less

  @importsub / test.less 
 div.a {
 background-image：url（'imagea.jpg'）; 
} 
  

sub / test.less

  div.b {
 background-image：url（'imageb.jpg'）; 
} 
  

output.css

  div.b {
 background-image：url（'imageb.jpg'）; 
} 
 div.a {
 background-image：url（'imagea.jpg'）; 
} 
  

correct_output.css

  div.b {
 background-image：url（'sub / imageb.jpg'）; 
} 
 div.a {
 background-image：url（'imagea.jpg'）; 
} 
  

有一种方法可以从LessJS获取此行为，

拉/ 331rel =nofollow>固定在这里似乎。如同使用方式下的非常一样，以下是如何应用修正：

 < script type =text / javascript> 
 less = {
 relativeUrls：true 
}; 
< / script> 
< script src =less.jstype =text / javascript>< / script> 
  

很有趣的是LESS没有这样做。你会认为从CSS到LESS（有效的CSS应该是有效的LESS）的向后兼容性是至关重要的。

It seems that LESS' import strategy for URL doesn't account for relative paths the same as CSS does.

test.less

@import "sub/test.less";
div.a {
    background-image:url('imagea.jpg');
}

sub/test.less

div.b {
    background-image:url('imageb.jpg');
}

output.css

div.b {
    background-image:url('imageb.jpg');
}
div.a {
    background-image:url('imagea.jpg');
}

correct_output.css

div.b {
    background-image:url('sub/imageb.jpg');
}
div.a {
    background-image:url('imagea.jpg');
}

Is there a way to get this behavior from LessJS or is this a bug in the implementation?

解决方案

This has been fixed here it seems. As detailed very briefly under usage, here's how to apply the fix:

<script type="text/javascript">
    less = {
        relativeUrls: true
    };
</script>
<script src="less.js" type="text/javascript"></script>

It's quite concerning that LESS didn't do this already. You'd think that having backwards compatibility from CSS to LESS (valid CSS should be valid LESS) would be crucial.

这篇关于没有正确导入带有网址的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！