Creating a libraries file #

If your component contains any CSS or JS or both, you will need a libraries.yml file. The contents could look as follows:

YAML Created with Sketch.
libraries.yml
status-messages:
  version: VERSION
  css:
    component:
      dist/status-messages.css: {}
  js:
    dist/status-messages.js: {}

The first line is the name of the library. The name of the library should be the same name as the .html.twig file and the folder name as explained in the naming convention chapter.

When you want to attach this library to a .html.twig file, you need to attach it as follows:

{{ attach_library(‘my-theme/status-messages') }}

You can link to the assets by defining the path to the CSS or JS file relative to the location of the libraries.yml file. This means that you can rename components, without having to worry about the paths to the assets.

Any other option that Drupal offers for libraries.yml files is also still possible.

The _global exception #

If your component contains any CSS or JS or both, you will need a libraries.yml file. But what about the _global component? The _global component is the exception to the rule: you won’t find a libraries.yml file here. The reason is because Drupal 8 currently requires a theme to have a [themename].libraries.yml. So instead of using a component-specific libraries.yml file inside the _global component, we use the theme-wide themename.libraries.yml in the root of the theme.