1. Open the {theme_name}.libraries.yml file under the /themes/custom/{theme_name}/ path and create a new entry for the new library. The new library should be defined in this file by its unique name, any number of CSS or JS files, dependencies and other properties of the library. Here, is an example:
bootstrap:
version: 3.3.7
css:
base:
bootstrap/css/bootstrap.min.css: { weight: 0 }
js:
bootstrap/js/bootstrap.min.js: {}
dependencies:
- core/jquery
For more information about how each property is defined, visit https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme.
Additionally, in the example above, notice how the JS files of the new library are located in the js directory of the theme. In case the JS files come from an external URL, you will need to use the "remote" property to load the library. For more information, visit https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme#external.
2. Open the {theme_name}.info.yml file under the /themes/custom/{theme_name}/ path and declare the new library by using the theme name and the library's unique name you defined in the previous step as shown in the screen capture below.
