Обычным способом загрузки стилей (и других браузерных ресурсов) на страницу является вызов метода \Magento\Framework\View\Page\Config::addPageAsset()
Пример: Как загружать или не загружать JavaScript и CSS в зависимости от административных настроек модуля
Однако если макет уже построен (то есть метод \Magento/Framework/View/Layout/Builder::build()
уже завершил свою работу), то вызывать \Magento\Framework\View\Page\Config::addPageAsset()
смысла нет:он ничего сделать не сможет.
Я нашёл 2 способа решения этой проблемы.
Способ 1
Если макет уже построен, но документ HTML ещё не сформирован, то можно вручную создать тег <link>
и добавить его в разметку HTML.
Стандарт HTML 5 разрешает тегу <link>
находиться внутри тега <body>
.
Узнать веб-адрес файла CSS по идентификатору ресурса можно вызовом метода \Magento\Framework\View\Asset\File::getUrl()
:
/**
* @param string $asset
* @return string
*/
function getAssetUrl($asset) {
/** @var \Magento\Framework\ObjectManagerInterface $om */
$om = \Magento\Framework\App\ObjectManager::getInstance();
/** @var \Magento\Framework\View\Asset\Repository $assetRepository */
$assetRepository = $om->get('Magento\Framework\View\Asset\Repository');
return $assetRepository->createAsset($asset)->getUrl();
}
Например:
getAssetUrl('Dfe_Markdown::simple-mde/main.css');
Способ 2
Если решение о загрузке файла CSS надо принимать интерактивно уже в контексте работы браузера, то можно сначала узнать адрес файла CSS способом 1 и передать этот адрес в качестве параметра компоненту JavaScript.
Затем компонент JavaScript может вручную создать тег <link>
и добавить его на страницу:
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
Этот способ не совсем прост, но он работает. Жду стандартный более простой способ: