Support Center

How to add a library in your D8 theme to use it globally

Last Updated: Jul 31, 2017 06:03PM EEST
To attach a third party Javascript library to your D8 website, you will need to add it as an asset using the library management system Drupal provides. 

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.​
 

Contact Us

support-agent@morethanthemes.com
http://assets1.desk.com/
false
morethanthemes
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete