Loading...

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. 
 

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Back to Section navigation
Back to Site navigation