Anytime we want to add CSS or JS files to our theme, we will need to either create or modify an existing *.libraries.yml file that allows us to organize our assets. Each library entry can include one or more pointers to the file and location within our theme structure. Remember that the filename of our *.libraries.yml file should follow the same naming convention as our theme.
We can begin by following these steps:
- Open twiggy.libraries.yml.
- Delete the global library reference.
- Add a library entry named bootstrap.
- Add a version that reflects the current version of Bootstrap that we are using.
- Add the CSS entry for bootstrap.min.css and bootstrap-theme.min.css.
- Add the JS entry for bootstrap.min.js.
- Add a dependency to jQuery located in Drupal's core:
bootstrap: version: 3.3.6 css: theme: css/bootstrap.min.css: {}
css/bootstrap-theme.min.css: {} js: js/bootstrap.min.js: {}
dependencies: - core/jquery
- Save twiggy.libraries.yml.
A quick note about dependencies: dependencies allow any JS file that relies on a specific JS library to make sure that the file can include the library as a dependency, which makes sure that the library is loaded before our JS file. In the case of Twitter Bootstrap, it relies on jQuery and since Drupal 8 has it as part of its core.libraries.yml file, we can reference it by pointing to that library and its entry.