Подключение css и js файлов в Drupal 8

Если какие-то стили нужно подключать на каждой странице и их никак не сгруппировать в отдельную библиотеку, то можно описать их под именем global-styling:

global-styling:
    css:
        theme:
            css/layout.css: {}
            css/style.css: {}
            css/colors.css: {}

Редактируем файлCUSTOM_THEME.libraries.yml

НАЗВАНИЕ_БИБЛИОТЕКИ_ИЛИ_КОМПОНЕНТА:
      version: 1.x
      # css - это раздел где объявляются css файлы стилей.
      css:
          # В отличии от js, тут имеется дополнительное вложение, которое может
          # принимать следующие занчения:  base, layout, component, state and theme
          # В соответствии с SMACSS стандартом они объявляют вес стилей. Соответственно
          # стили с меньшим весом грузятся раньше, а с большим, в самом конце.
          # base CSS_BASE = -200
          # layout  CSS_LAYOUT = -100
          # component  CSS_COMPONENT = 0;
          # state CSS_STATE = 100
          # theme CSS_THEME = 200
          # Если не понимаете, лучше не рискуйте, используйте theme раздел.
          theme:
              # Непосредственно сам файл стилей относительно модуля/темы.
              css/header.css: {}
              # Внешний файл
              https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.css: { type: external, minified: true }
      # js - раздел для объявления JavaScript файлов.
      js:
          # Подключение файла относительно модуля/темы.
          js/my-library.js: {}
          # Внешний файл
          https://cdn.jsdelivr.net/npm/slick-carousel/slick/slick.min.js: { type: external, minified: true }
      # Зависимости.
      dependencies:
          # Указываем что надо загрузить jquery на страницу.
          - core/jquery
          # Указываем что надо загрузить компонент на страницу.
          - CUSTOM_THEME/НАЗВАНИЕ_КОМПОНЕНТА
  • type: external- означает что внешняя библиотека
  • minified: true- означает что файл сжат
  • weight: 99- вес файла

Программное подключение файле custom_theme.theme

$page['#attached']['library'][] = 'MODULENAME/LIBRARYNAME';

Подключение библиотеки из Twig

{{ attach_library('CUSTOM_THEME/НАЗВАНИЕ_КОМПОНЕНТА') }}