What makes a component?

Putting files in a folder together, doesn’t make it a component yet. We need a bit of logic to make it in to a component Drupal can understand.

We will dive in to each type of file later, but the main file that binds a component together is libraries.yml.

status-messages

dist

status-messages.css

status-messages.js

libraries.yml

status-messages:
  version: VERSION
  css:
    component:
      dist/status-messages.css: {}
  js:
    dist/status-messages.js: {}

status-messages.html.twig

{{ attach_library('compony/status-messages') }}

<div>...</div>

status-messages.js

status-messages.scss

Inside the components’ libraries.yml we define a library of CSS-assets, JS-assets or both. We write this in the same way as if we would write it in the default my-theme.libraries.yml file of the theme.

Next, we link the library to the HTML by attaching the library inside the .html.twig file like this: {{ attach_library(‘my-theme/status-messages') }}

And that’s it! If Drupal uses this status-messages.html.twig file, Drupal will correctly load the assets, defined in libraries.yml.