Version:

    Add Javascript and CSS libraries

    You can attach Javascript and CSS files to a custom component and also refer dependencies on other Drupal libraries. To attach such files, add a jscss or dependencies to the custom component YAML definition.

    js:
      js-template.js: {}
      https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: { type: external, minified: true, attributes: { defer: true, async: true } }

     

    css:
      example_stylesheet.css: {}
      https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css: { type: external, minified: true }
    

     

    These properties follow the same format as Drupal libraries. In fact Site studio will create a Drupal library for each custom component. You can refer to the Custom component definition reference page and Drupal documentation https://www.drupal.org/docs/creating-custom-modules/adding-assets-css-js-to-a-drupal-module-via-librariesyml for more information.

    Note that the `css` properties for custom components do not need a style type key (base, component, state, theme) as all css for custom components will be placed at the `component` level. 
     

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.