꿀꺽 꿀꺽하지 않고 Symfony2를 사용하여 Foundation 5 컴파일

Question

나는 Symfony2이 api와 back-end 역할을하는 프로젝트를 실행 중입니다. 나는 프론트 엔드 의존성을 설치하기 위해 bower를 사용하는데, Angularjs과 Zurb Foundation을 포함한다. 우리는 Assetic - Symfony2 번들 -을 사용하여 자산을 축소, 축소, 사전 렌더링 및 결합합니다. Assetic으로 컴파일 된 Sass (.sass)도 사용하고 있습니다.

재단의 _settings.scss으로 작업하고, 변수를 변경할 때마다 재단에서 자체를 다시 컴파일해야한다는 것을 알고 싶습니다. 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 프로젝트를 실행하는 사람들에게 더 적합합니다.

은 내가 말대꾸를 컴파일 Assetic를 사용

Answer 1

대답은 매우 간단하다. 그것은 일반적으로 다음과 같습니다 : 그 모두가 기초가 어떻게 작동하는지 것으로 보인다 때문에

{% 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을 가져옵니다. Assetic이 이미 나를 컴파일하고 있기 때문에 compass watch을 실행할 필요가 없습니다.

기초를 업데이트 할 때 중 하나를 덮어 쓰지 않도록 내 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";