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
css3-full Created with Sketch.
status-messages.css
js-badge Created with Sketch.
status-messages.js
YAML Created with Sketch.
libraries.yml
status-messages:
  version: VERSION
  css:
    component:
      dist/status-messages.css: {}
  js:
    dist/status-messages.js: {}

Twig Created with Sketch.
status-messages.html.twig
{{ attach_library('compony/status-messages') }}

<div>...</div>
js-badge Created with Sketch.
status-messages.js
sass Created with Sketch.
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.