How to inject CSS and JavaScript into a template

Now we want to add some default styles and some interactions to our template, and to do that, we need a CSS file and a JavaScript file. To wrap those files together and attach them to the render array, you need to define a library.

Libraries

Libraries are defined in YML files, both by modules and themes. To add a library to the weather module, we need to create an alps_weather.libraries.yml file in the module’s folder with this content:

base:
  version: 1.0.0
  css:
    component:
      css/alps_weather.css: {}
  js:
    js/alps_weather.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once

In this file, we define a new library called alps_weather/base because the library identifier consists of the machine name of the module and...