Twig function that lets Pattern Lab use a simple version of Drupal's attach_library function to add CSS or JavaScript files per component.
- Place the
pl_attach-library.function.php
file in thepattern-lab/source/_twig-components/functions
directory. - Add
themePath: '/themes/my-awesome-theme
into thepattern-lab/config/config.yml
configuration file. Modify the path to point to the root of your theme.
Since this function is specifically for Pattern Lab (Drupal has its own), it is namespaced with pl_
so if you're using the Unified Twig Extensions module, it will ignore it when syncing functions between Drupal and Pattern Lab.
Simply add {{ attach_library(THEME/LIBRARYNAME) }}
to any component Twig file using the same syntax as Drupal. Pattern Lab will then locate the theme's *.libraries.yml
file and load the file from the path in that library whenever that component is loaded. Since this function uses the same syntax as Drupal, nothing else needs to be done when loading the component in Drupal. It will work as it always did!
This function will not load dependencies. If you need to load a dependency or other file in Pattern Lab, it can be done as usual in /meta/foot.twig
. See the commented out parts in Emulsify's file for examples of how to do this.