Если какие-то стили нужно подключать на каждой странице и их никак не сгруппировать в отдельную библиотеку, то можно описать их под именем 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/НАЗВАНИЕ_КОМПОНЕНТА') }}