Libsass 为 JSF 项目中的 CSS 个文件创建的错误源映射
Wrong source maps created by Libsass for CSS files in a JSF project
我正在使用 Libsass（通过 libsass-maven-plugin）将 SASS 文件编译成 JSF 项目中的 CSS 文件。 outputStyle 是 "compressed"。
生成的源映射显然是错误的——在浏览器中检查某些内容时，它通常指向错误的源文件。为什么会这样？
在构建期间，Libsass 评估提供的 CSS 文件，并以编码的行号和列号的形式在创建的源映射中引用它们的代码。
"compressed" outputStyle 意味着所有代码都在一行中，因此源映射被迫仅依赖于列号。
现在，JSF CSS 文件通常包含这样的 EL 资源表达式：
.ui-icon-info {
background-image: url("#\{resource['images/info.png']}");
}
这些表达式在运行时进行评估并替换为 URL。这意味着 served CSS 与 Libsass 基于其源映射的服务不同。这就是地图错误的原因 - 它们的列号引用不再匹配。
一种可能的解决方法是使用 "compressed" 以外的 outputStyle，例如"expanded"。那么至少行号是正确的，这应该足够好了。只是不要将这些 EL 表达式分成多行。
我正在使用 Libsass（通过 libsass-maven-plugin）将 SASS 文件编译成 JSF 项目中的 CSS 文件。 outputStyle 是 "compressed"。 生成的源映射显然是错误的——在浏览器中检查某些内容时，它通常指向错误的源文件。为什么会这样？
在构建期间，Libsass 评估提供的 CSS 文件，并以编码的行号和列号的形式在创建的源映射中引用它们的代码。 "compressed" outputStyle 意味着所有代码都在一行中，因此源映射被迫仅依赖于列号。
现在，JSF CSS 文件通常包含这样的 EL 资源表达式：
.ui-icon-info {
background-image: url("#\{resource['images/info.png']}");
}
这些表达式在运行时进行评估并替换为 URL。这意味着 served CSS 与 Libsass 基于其源映射的服务不同。这就是地图错误的原因 - 它们的列号引用不再匹配。
一种可能的解决方法是使用 "compressed" 以外的 outputStyle，例如"expanded"。那么至少行号是正确的，这应该足够好了。只是不要将这些 EL 表达式分成多行。