【问题标题】:Compiling Foundation 5 without gulp but with Symfony2不使用 gulp 但使用 Symfony2 编译 Foundation 5
【发布时间】:2015-01-31 02:40:32
【问题描述】:
我正在运行一个项目,Symfony2 为 api 和后端提供服务;我使用 bower 来安装我的前端依赖项,包括 Angularjs 和 Zurb Foundation。我们正在使用Assetic——一个 Symfony2 包——来缩小、丑化、预渲染和合并我们的资产。我们还使用由 Assetic 编译的Sass(如.sass)。
我想使用 Foundation 的 _settings.scss 并了解 Foundation 需要在我更改变量时重新编译自身。我试过运行 compass watch path_to_file 但这并没有更新我的 Foundation 项目。
据我了解,很多人使用Compass 或gulp 运行基金会。我有readthroughseveraldocs,但我不确定它与我的具体情况有何关系。一位消息人士建议运行compass init 来启动一个项目,并在我进行更改时运行compass watch 来更新项目,但这似乎不适用于Symfony2,但我可能错了。有人有提示吗?
我正在使用这个基金会回购:https://github.com/zurb/bower-foundation,
但也有这个:https://github.com/zurb/foundation-apps。第二个 repo 似乎更适合使用 gulp、foundation cli 或在启动项目时运行 compass init 运行 Foundation 项目的人。
【问题讨论】:
标签:
symfony
compass-sass
assetic
zurb-foundation-5
【解决方案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 是我创建的一个文件,因为这似乎是每个人使用基础的方式。 app.scss 然后导入我想要的基础组件以及normalize.scss 和_settings.scss。我不必运行compass watch,因为Assetic 已经为我编译了。
我可能会将我的app.scss 和_settings.scss 从我的供应商目录中移出,以确保在更新基础时不会重写。但目前我的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";