Перейти к содержимому
BXWiki

Стили и скрипты не подключились - разбор причин

Файл стилей или скрипта лежит на месте, вызов подключения написан, а на странице его нет. Разбираем причины по убыванию частоты, начиная с самой страницы.

С чего начать

Смотрим, попал ли файл в разметку страницы:

Окно терминала
curl -s https://example.com/catalog/ | grep -oE '(href|src)="[^"]*(popup|custom)[^"]*"' | head
curl -s https://example.com/catalog/ | grep -c 'kernel_main'
# имя файла в разметке означает, что подключение сработало и дело в самом файле

Отсутствие файла в разметке отделяет проблему подключения от проблемы содержимого. Если файл в разметке есть, дальше проверяют его доступность и содержимое, а не код вызова.

Проверяем, отдаётся ли файл сервером:

Окно терминала
curl -sI https://example.com/local/templates/main/css/popup.css | head -3
ls -l /home/bitrix/www/local/templates/main/css/popup.css
# код 404 при существующем файле означает ошибку в пути или в регистре имени

Смотрим настройки объединения файлов:

printf("объединение CSS: %s\n", \Bitrix\Main\Config\Option::get('main', 'optimize_css_files'));
printf("объединение JS: %s\n", \Bitrix\Main\Config\Option::get('main', 'optimize_js_files'));
// объединённый файл собирается один раз и живёт до сброса кэша

Объединение собирает все подключённые файлы в один. Свежая правка попадает в него только после сброса кэша, и до этого момента страница честно отдаёт прежнюю сборку.

Проверяем момент вызова подключения:

// в шаблоне компонента или в шаблоне сайта - работает
\Bitrix\Main\Page\Asset::getInstance()->addCss('/local/templates/main/css/popup.css');
// в эпилоге страницы или после вывода подвала - уже поздно

Причины

  1. Подключение вызвано слишком поздно примерно 25% случаев

    ПризнакВ разметке страницы файла нет вовсе, хотя вызов подключения точно выполняется.

    ПроверкаСмотрим, где именно стоит вызов: до вывода подвала страницы или уже после него.

    Что делатьПереносим подключение в шаблон сайта или в шаблон компонента, до закрытия буфера.

  2. Объединение файлов отдаёт прежнюю сборку примерно 25% случаев

    ПризнакВ разметке один общий файл вместо ваших, а правки в нём отсутствуют.

    ПроверкаСмотрим настройки объединения и дату изменения собранного файла в каталоге кэша.

    Что делатьСбрасываем кэш объединения либо временно выключаем объединение на время разбора.

  3. Файл не найден по указанному пути примерно 20% случаев

    ПризнакФайл в разметке есть, но сервер отдаёт по его адресу ошибку четыреста четыре.

    ПроверкаЗапрашиваем файл напрямую и сверяем путь и регистр имени с файлом на диске.

    Что делатьПриводим путь к реальному расположению файла, помня о регистре имён на сервере.

  4. Подключение живёт внутри кэша компонента примерно 20% случаев

    ПризнакНа первой сборке страницы файл подключается, а на последующих исчезает.

    ПроверкаПроверяем, не стоит ли вызов в файле правки результата компонента.

    Что делатьПереносим подключение в эпилог шаблона компонента, который выполняется всегда.

  5. Браузер держит старую версию файла примерно 10% случаев

    ПризнакНа сервере файл новый, а в браузере видно прежнее содержимое без правок.

    ПроверкаОткрываем адрес файла напрямую и сравниваем содержимое с файлом на диске.

    Что делатьПодключаем файл средствами платформы: она добавляет метку версии к адресу.

Частые вопросы

Почему стиль не подключается из кода страницы?

Вызов выполнен после того, как шапка уже выведена и буфер закрыт. Подключение делают в шаблоне сайта или компонента, до вывода подвала.

Зачем платформе объединять файлы?

Меньше запросов и меньше времени на загрузку страницы у посетителя. Цена - собранный файл живёт до сброса кэша и не показывает свежие правки.

Как исключить файл из объединения?

Подключать его с уникальным путём или отдельным тегом в шаблоне. Такой файл останется самостоятельным и не попадёт в общую сборку.

Чем плох тег стилей прямо в разметке?

Он не попадает в объединение, не получает метку версии и не проверяется на дубли. Средства платформы дают всё это без дополнительных усилий.

Правка есть на сервере, но не видна в браузере.

Помогает открыть адрес файла напрямую: так видно, что отдаёт сервер. Метка версии в адресе снимает этот вопрос для посетителей навсегда.

Смежное

Первоисточник