Globale CSS- und Javscript-Dateien einbinden

Möchte man CSS-/JS-Dateien laden, die für die gesamte Anwendung zur Verfügung stehen sollen, macht es Sinn, diese unter /app/Resources/public/css bzw. /app/Resources/public/js zu speichern.

Um jetzt die CSS Dateien via Assetic einzubinden, kann folgendes Snippet im Twig-Template verwendet werden:

{% stylesheets '../app/Resources/public/css/*' filter='cssrewrite' %}
  <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Mit dem Snippet werden automatisch alle CSS Dateien in dem entsprechenden Ordner geladen und eingebunden. Ebenfalls möglich ist es, entsprechende Preprocessoren via LESS oder SCSS zu verwenden, sofern die entsprechenden Filter in der Assetic Konfiguration hinterlegt sind.

Möchte man nur eine bestimmte CSS-Datei laden, ersetzt man das * mit dem Dateinamen.

Für JavaScript sieht das entsprechende Snippet wie folgt aus:

{% javascripts '../app/Resources/public/js/*' %}
  <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}