【问题标题】:Compiling Foundation 5 without gulp but with Symfony2不使用 gulp 但使用 Symfony2 编译 Foundation 5
【发布时间】:2015-01-31 02:40:32
【问题描述】:

我正在运行一个项目,Symfony2 为 api 和后端提供服务;我使用 bower 来安装我的前端依赖项,包括 AngularjsZurb Foundation。我们正在使用Assetic——一个 Symfony2 包——来缩小、丑化、预渲染和合并我们的资产。我们还使用由 Assetic 编译的Sass(如.sass)。

我想使用 Foundation 的 _settings.scss 并了解 Foundation 需要在我更改变量时重新编译自身。我试过运行 compass watch path_to_file 但这并没有更新我的 Foundation 项目。

据我了解,很多人使用Compassgulp 运行基金会。我有readthroughseveraldocs,但我不确定它与我的具体情况有何关系。一位消息人士建议运行compass init 来启动一个项目,并在我进行更改时运行compass watch 来更新项目,但这似乎不适用于Symfony2,但我可能错了。有人有提示吗?

我正在使用这个基金会回购:https://github.com/zurb/bower-foundation, 但也有这个:https://github.com/zurb/foundation-apps。第二个 repo 似乎更适合使用 gulpfoundation 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";
    

    【讨论】:

      猜你喜欢
      • 2023-03-20
      • 2016-03-05
      • 2016-09-01
      • 2018-03-11
      • 2017-08-10
      • 2022-01-10
      • 1970-01-01
      • 2016-02-28
      • 2017-11-22
      相关资源
      最近更新 更多