Working with Libraries API (and where to put CSS/JS)

The method by which themes and modules attach CSS and JS to a page is through Libraries API. This is extendable, very flexible, and easy to use.

To create a library, first create a themename.libraries.yml file in the root of your theme. Within this file, you can create a library using YML syntax:

card:
  css:
    component:
      css/components/card.css: {}
  js:
    js/card.js: {}

This library can then be loaded through one of many following methods.

Loading the library globally through your theme’s *.info.yml file

You can tell your theme to always load the library by specifying it in the theme’s *.info.yml file:

libraries:
  - mytheme/card

Attaching the library through a Twig template

This will ensure the library is loaded once whenever the Twig template is in use:

{{ attach_library('mytheme...