Assets In Twig

Including Assets in Twig Templates

When working with Twig templates in this project, always use the path function to include static assets (such as CSS, JS, images, or fonts). This ensures that asset URLs are correctly prefixed for both production and pull request preview deployments.

Example

Instead of:

<link rel="stylesheet" href="/css/main.css" />

Use:

  <link rel="stylesheet" href="{​{ path('/css/main.css') }​}">

This applies to all asset types:

  • CSS: <link rel="stylesheet" href="{​{ path('/css/main.css') }}">
  • JS: <script src="{​{ path('/js/app.js') }}"></script>
  • Images: <img src="{​{ path('/images/logo.svg') }}" alt="Logo">
  • Fonts (in CSS): url('{​{ path('/fonts/myfont.woff2') }}')

Why?

Using the path function ensures that assets are loaded correctly, whether the styleguide is deployed at the root of the domain or in a subfolder (such as for pull request previews).