Разные CSS отображаются между средой разработки и производственной средой для веб-сайта с одинаковым кодом

Question

Для следующего веб-сайта, который я создал: ifrs.site (сайт WordPress с настраиваемой темой, если это важно), есть перекрытие содержимого нижним колонтитулом, когда окно браузера не развернуто на рабочем столе или при просмотре на мобильный. Я исправил эту проблему с перекрытием в среде разработки, но действующий веб-сайт с тем же кодом CSS, что и веб-сайт разработчика, имеет худшее перекрытие.

В чем причина несоответствия? Вы можете увидеть различия в коде в этом репозитории на github: https://github.com/keg504/IFRS-Website-theme-files, в двух ветвях dev-файлов и master. То, что находится на master, - это то, что сейчас используется на сайте.

Я использую Local by Flywheel для среды разработки на Windows 10, а CSS запускается с использованием конфигурации webpack на nodejs.

Изменить: По просьбе Aliqua я добавил функцию wp_enqueue_style, которую я вызываю, чтобы загрузить CSS: wp_enqueue_style('our-main-styles', get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'));

Часть между стилями ... css изменяется всякий раз, когда npm сборка запускается в командной строке

Answer 1

В зависимости от вашего дизайна / настройки css мог бы включать в исходный код ?ver=1.0.0 или аналогичный. Это означает, что если вы внесли изменения, но не обновили версию, он по-прежнему вызывает исходный файл из кеша.

Некоторые разработчики преодолевают это, устанавливая часть массива enqueue_script() version на date() ( включая время с функцией час-мин-с c). Это будет означать, что каждый раз, когда страница обновляется, версия будет разной, и она не будет вызывать более старые версии css из кеша.

Найдите в коде строку сценария постановки в очередь для css, о котором идет речь, и посмотрите, можете ли вы установить date () на значение версии.

См. https://www.php.net/manual/en/function.date.php для получения дополнительной информации.

Обновление: на основе вашего обновления вы можете заменить это примерно так.

wp_enqueue_style( 'our-main-styles',
    get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'),
    array( $parent_style ), // remove if there is no parent style
    date("His")
);

Ссылка wp_enqueue_style - https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Заключительные мысли: обратите внимание, что этот ответ на самом деле может не быть фактическим решением насколько я пытался определить вашу проблему. Пожалуйста, обратитесь к https://developer.wordpress.org/, чтобы ознакомиться с вводной информацией, касающейся разработки WordPress. Если вы собираетесь внести больше изменений в свою CMS WordPress, вам понадобится базовое c понимание того, как вносить изменения. Пожалуйста, сфокусируйте часть своих исследований на создании плагинов, работе с дочерними темами и на том, как создавать свои собственные пользовательские функции. Тогда вы сможете писать более точные вопросы и в будущем сможете найти ответы на них.

Удачи в вашем развитии.