编译基础 5 没有吞咽，但使用 Symfony2

Question

我正在运行一个项目，Symfony2为 API 和后端提供服务;我使用 bower 来安装我的前端依赖项，包括 Angularjs 和 Zurb Foundation 。我们正在使用Assetic - 一个Symfony2捆绑包 - 来缩小，丑化，预渲染和组合我们的资产。我们还使用Sass（如.sass），由Assetic编译。

我想与基金会的_settings.scss一起工作，并了解每当我更改变量时，基金会都需要重新编译自己。我试过运行compass watch path_to_file但这不会更新我的基础项目。

据我了解，很多人使用Compass或gulp来运行基金会。我已经阅读了几个文档，但不确定它与我的特定情况有何关系。一个消息来源建议运行compass init来启动一个项目，当我进行更改时compass watch更新项目，但这似乎不适合与 Symfony2 有关，但我可能是错的。有人有提示吗？

我正在使用这个基础存储库：https://github.com/zurb/bower-foundation，但也有这个：https://github.com/zurb/foundation-apps。第二个存储库似乎更适合那些使用gulp、foundation cli运行基金会项目或在启动项目时运行compass init的人。

Answer 1

答案非常简单：

我用Assetic来编译我的屁股。它通常如下所示：

{% stylesheets
    "@SiteBundle/Resources/public/vendor/foundation/scss/app.scss"
filter="compass" %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}

app.scss是我创建的文件，因为这似乎是每个人使用 Foundation 的方式。 然后app.scss导入我想要的基础组件以及normalize.scss和_settings.scss。我不必运行compass watch Assetic因为它已经在为我编译了。

我可能会将我的app.scss和_settings.scss移出我的供应商目录，以确保在更新 foundation 时也不会重写。但目前，对于任何感兴趣的人，这是我app.scss的样子：

@charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Import normalize and settings
@import "normalize.scss";
@import "foundation/settings";
// Make sure the charset is set appropriately
// Behold, here are all the Foundation components.
@import "foundation/components/grid";
// @import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
// @import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
// @import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
// @import "foundation/components/magellan";
// @import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";