如何将 CSS 框架与 Yesod 一起使用？

Question

我想将 Blueprint CSS 框架与 Yesod 一起使用。 有没有最佳实践？

因为 Yesod 使用 CSS 的模板，所以在我看来我不能直接使用 .css 文件？ 我必须将它们重命名为 .lucius-files 吗？

如何将 CSS 添加到 defaultLayout？

Answer 1

一种方法是将它们重命名为 .lucius 文件，这应该可以正常工作。 （如果没有，这是 Lucius 中的一个错误，您应该报告它。）但是您也可以将 CSS 存储在 static 文件夹中，并通过 addStylesheet 调用引用它； 例如，这是我对 Yesod Wiki 采取的方法。

Answer 2

yesod wiki 有一篇关于此的文章。 解决方案基本上是将蓝图的副本放在您的静态文件夹中，然后您可以像这样以类型安全的方式引用蓝图（在您的templates/default-layout-wrapper.hamlet中，在^{pageHead pc}之前）：

<link rel=stylesheet media=screen href=@{StaticR blueprint_screen_css}>
<link rel=stylesheet media=print href=@{StaticR blueprint_print_css}>