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 js, css 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.