Fork me on GitHub

LoadAsset

{{ loadAsset(path, contentType = null) }} is a method to inject javascript, css or scss file into your PageResponse.

Example:

{{ loadAsset('http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400', 'text/css') }}
{{ loadAsset('@AppBundle/css/layout.scss') }}

{{ loadAsset('@AppBundle/js/jquery-1.11.1.min.js') }}

<div class="main-website">
  {% contents 1 %}
</div>

There is also {{ loadAssetAtBottom(path, contentType = null) }} with the same behavior available, except the fact, that assets will be added directly before closing </body>.

If you have no normal file names like js/app.js but something like js/app you need to specify the second parameter to tell Jarves which asset load it should apply. {{loadAsset('js/app', 'text/javascript') }}.

Path

path argument of loadAsset() can be a expression like @{bundleName}{path}. @bundleName will be replaced with the Resources/public folder of the bundle.

Example: @AppBundle/css/layout.scss -> src/AppBundle/Resources/public/css/layout.scss.

Auto transpiling

Once you have install sass (sass-lang.com/install) you can benefit from Jarves functionality to automatically compile scss to css.

Statement like {{ loadAsset('@AppBundle/css/layout.scss') }} let the layout.scss compile. Its generated css is then injected to the PageResponse:

<link rel="stylesheet" type="text/css" href="cache/scss/bundles/app/css/layout.css?c=3078ab" >

Found a typo? The website is based on Markdown, please feel free to send us a pull request! :) github.com/jarves/jarves.io/tree/master/app/jarves/website/jarves.io