Grav 和 Foundation SASS，它是如何工作的？

【问题标题】：Grav and Foundation SASS, how does it work?Grav 和 Foundation SASS，它是如何工作的？
【发布时间】：2019-04-07 09:59:16
【问题描述】：

我已经通过 composer 安装了 Grav (https://getgrav.org/)。我创建了自己的主题，所以我可以从头开始。但现在我想使用媒体查询（断点）、弹性网格、rem-calc() 函数、均衡器形式 Foundation Zurb。

我已经通过命令行安装了 Foundation：

npm install foundation-sites --save

但现在我不知道如何让基础与 Grav CMS 一起工作。我试图在我的基础 scss 中 @importfoundation.scss（我已经使用了一个 css 编译器）。但这似乎不起作用。

我的文件夹结构是这样的：

Foundation-sites 在 node_modules 地图中。我必须做什么才能让 Foundation 工作？

【问题讨论】：

【解决方案1】：

您的主题将包含您引用使用构建工具构建的 css 文件的路径的页面部分。

在user 目录中，有一个themes 目录，其中包含资产，例如css 和twig 文件。

实际上最好将 Grav 网站和主题分开考虑。您可能希望您的 Foundation 资产包含在主题中并从那里构建，以及任何其他主题配置和蓝图。

来自构建css文件的主题参考......

{% do assets.add('theme://css/dist/styles.css', 101) %}
{{ assets.css() }}

...在您的<head> 中。您的构建路径可能与 css/dist/styles.css 不同，但希望您能理解。 assets.add 所做的就是让你的样式通过 Grav 的 asset manager 进行过滤，它带有一些很酷的东西，比如缩小和缓存破坏。很有帮助！

【讨论】：