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
.