使用Symfony2编译基础5而不是吞咽

Question

我正在运行一个项目，其中Symfony2为api和后端提供服务；我使用bower安装我的前端依赖项，包括Angularjs和Zurb Foundation。我们使用Assetic--一个Symfony2捆绑包--来缩小、丑化、预渲染和组合我们的资源。我们还使用了Assetic编译的Sass (as .sass)。

我想使用基金会的_settings.scss，并理解每当我更改一个变量时，基金会都需要重新编译。我尝试过运行compass watch path_to_file，但这并没有更新我的基础项目。

据我所知，很多人使用Compass或gulp来运行foundation。我有read through several docs，但不确定它与我的特定情况有什么关系。一位消息人士建议运行compass init来启动项目，并在我进行更改时运行compass watch来更新项目，但这似乎不适用于Symfony2，但我可能是错的。有谁有小费吗？

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

Answer 1

答案非常简单：

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

{% 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";