Layout Twig Contao 5.6: Einbinden von CSS/JS-Files

[Toubibe]

Mit dem Erscheinen von Contao 5.6 machte ich mich nun einige Stunden hinter das Layout mit dem default.html.twig.
Während die Einrichtung zusätzlicher Slots fehlerfrei klappte, gelingt es mir trotz diversen Versuchen und Recherchen nicht, CSS-Stylesheets einzubinden.
Ich habe das praktische Template Studio benutzt und bin insbesondere nach der Entwickler-Dokumentation vorgegangen (Reference>Twig>Tags>add), Fehlermeldung im Template Studio gibt es keine, aber trotz Neuaufbau des Cache und Leeren des Browsercaches wird die CSS-Datei einfach nicht eingebunden. Auch mit js und zum Beispiel 'content' schaffe ich es nicht.
Vermutlich stehe ich irgendwo auf dem Schlauch...

{% extends "@Contao/layout/default.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.
#}
{% use "@Contao/component/_stylesheet.html.twig" %}
{% block head %}
    {{ parent() }}
    {# Adds a stylesheet #}
{% add "style" to stylesheets %}
    {% with {file: asset('files/css/style.css')} %}
        {{ block('stylesheet_component') }}
    {% endwith %}
{% endadd %}
{% endblock %}

[Spooky]

Dieses neue Feature ist noch experimentell.

Verwendest du für deine Assets so etwas wie Webpack?

[Franko]

An den Vorgehensweisen & bez. möglicher Optimierungen wird gearbeitet:
s.a.: https://github.com/contao/contao/issues/8705

[Toubibe]

Dieses neue Feature ist noch experimentell.

Verwendest du für deine Assets so etwas wie Webpack?

Nein, ich habe mich an einer nativen Neuinstallation meine ersten Versuche mit dem layout twig gemacht.

[Toubibe]

An den Vorgehensweisen & bez. möglicher Optimierungen wird gearbeitet:
s.a.: https://github.com/contao/contao/issues/8705

Dieses neue Feature ist noch experimentell.

Alles klar, werde mich noch etwas in Geduld üben.
Schön wäre natürlich, wenn in Zukunft solche Basis-Anpassungen wie bisher bei fe_page vom Backend her steuerbar wären und so ebenfalls wie bisher nur "ausserordentliche" Veränderungen am Layout der manuellen Einträge bedürfte. Aber ich gehe davon aus, dass dies wohl vom Core-Team schon längst so angedacht ist

[zoglo]

Alles klar, werde mich noch etwas in Geduld üben.
Schön wäre natürlich, wenn in Zukunft solche Basis-Anpassungen wie bisher bei fe_page vom Backend her steuerbar wären und so ebenfalls wie bisher nur "ausserordentliche" Veränderungen am Layout der manuellen Einträge bedürfte. Aber ich gehe davon aus, dass dies wohl vom Core-Team schon längst so angedacht ist

Die Idee ist es, dass du das nun im Template machst. Gerade für einfache Sachen braucht es ja keine Checkbox oder Einstellungen, für die es dann in der Datenbank gespeichert werden muss. Moritz hat hier sicher schon einige Ideen, wie man das Template-Studio anpassen wird

Denn Datenbank kannst du nicht so einfach versionieren und Layout ist ja schon Theme Sache

[RalfPuppe]

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
    <meta charset="UTF-8">
    <meta name="generator" content="Contao Open Source CMS">
    {%- block title %}
        {% set title = head.title|default %}
        {% if title and contao.page.rootPageTitle|default %}
            {% set title = title ~ ' - ' ~ contao.page.rootPageTitle %}
        {% endif %}
         <title>{{ title }}</title>
    {%- endblock -%}

    {# @var \Contao\CoreBundle\Routing\ResponseContext\HtmlHeadBag\HtmlHeadBag head_bag #}
    {% set head_bag = response_context.head %}

    <meta name="robots" content="{{ head_bag.metaRobots }}">
    <meta name="description" content="{{ head_bag.metaDescription|u.truncate(320, '…') }}">
    {% if page['enableCanonical'] -%}
        <link rel="canonical" href="{{ head_bag.canonicalUriForRequest(app.request) }}">
    {% endif %}
    
    {# Eigenes CSS-File #}
    <link rel="stylesheet" href="files/css/iliyev.css">

    {%- block end_of_head -%}
        {% for element in response_context.end_of_head %}
            {{ element|raw }}
        {% endfor %}
    {%- endblock -%}
{%- endblock -%}

[t.mayer]

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
<meta charset="UTF-8">
<meta name="generator" content="Contao Open Source CMS">
{%- block title %}
{% set title = head.title|default %}
{% if title and contao.page.rootPageTitle|default %}
{% set title = title ~ ' - ' ~ contao.page.rootPageTitle %}
{% endif %}
<title>{{ title }}</title>
{%- endblock -%}

{# @var \Contao\CoreBundle\Routing\ResponseContext\HtmlHea dBag\HtmlHeadBag head_bag #}
{% set head_bag = response_context.head %}

<meta name="robots" content="{{ head_bag.metaRobots }}">
<meta name="description" content="{{ head_bag.metaDescription|u.truncate(320, '…') }}">
{% if page['enableCanonical'] -%}
<link rel="canonical" href="{{ head_bag.canonicalUriForRequest(app.request) }}">
{% endif %}

{# Eigenes CSS-File #}
<link rel="stylesheet" href="files/css/iliyev.css">

{%- block end_of_head -%}
{% for element in response_context.end_of_head %}
{{ element|raw }}
{% endfor %}
{%- endblock -%}
{%- endblock -%}

Danke @RalfPuppe für Deinen Workaround!

Ggf. (bin kein Twig-Experte) geht's updatesicherer und kürzer wie folgt?
Hab noch die Einbindung einer .js-Datei am Body-Ende ergänzt.

{% extends "@Contao/layout/default.html.twig" %}

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="/files/css/css-file.css">
{%- endblock -%}

{% block body %}
    {{ parent() }}
    <script src="/files/js/js-file.js"></script>
{%- endblock -%}