Libsass为JSF项目中的CSS文件创建的错误源代码映射

Question

我使用Libsass（通过libsass-maven-plugin）将SASS文件编译成JSF项目中的CSS文件。 outputStyle是＆＃34;压缩＆＃34;。 结果源映射显然是错误的 - 当在浏览器中检查某些内容时，它通常指向错误的源文件。为什么会这样？

Answer 1

在构建期间，Libsass会评估提供的CSS文件，并以编码的行号和列号的形式在创建的源映射中引用它们的代码。 ＆＃34;压缩＆＃34; outputStyle意味着所有代码都在一行中，因此源映射只能依赖于列号。

现在，JSF CSS文件通常包含如下所示的EL资源表达式：

.ui-icon-info {
    background-image: url("#\{resource['images/info.png']}");
}

这些表达式在运行时进行评估，并替换为URL。这意味着服务的CSS与Libsass基于其源映射的CSS不同。这就是地图错误的原因 - 它们的列号引用不再匹配。

可能的解决方法可能是使用＆＃34;压缩＆＃34;以外的outputStyle，例如＆＃34;膨胀＆＃34 ;.那么至少线号是正确的，这应该足够好了。只是不要将那些EL表达式分成多行。