Я не могу найти файл wordpress.scss, из которого загружается мой сайт.

Вопрос или проблема

Когда я переношу мой localhost на мой рабочий сайт, часть моего стиля исчезает. Когда я проверяю веб-страницу, она загружается из моего файла wordpress.scss. Я редактирую этот файл и вношу изменения, но ни одно из изменений не работает. Я застрял и не знаю, что делать дальше… пожалуйста, помогите.

Ваш браузер загружает файл css и sourcemap, который имеет ссылки на файл .scss, который компилируется в css.

В вашей теме должен быть скрипт gulp или webpack, который используется для компиляции scss в css файл.

Если вы не знакомы с компиляцией scss->css или не можете найти файлы package.json и webpack.config.js или gulpfile.js в директории вашей темы, вы можете либо поискать скомпилированный css файл, который фактически загружается, и обычно он минимизирован для внесения изменений. Вы можете просто переопределить стили своими в админ-панели wordpress Внешний вид -> Настроить -> Дополнительный CSS.

Если вы найдете package.json в директории вашей темы, вы можете запустить команду npm install в консоли для установки зависимостей, и в package.json может быть секция scripts с командами сборки, которые вы можете использовать, как npm run-script build, чтобы создать css из файлов scss.

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

Важно -> после внесения изменений в css (или scss и пересборки css) и загрузки его на сервер не забудьте CMD+R Ctrl+F5, чтобы ваш браузер загрузил обновленный css.

Если вы используете git push для развертывания на рабочем сайте -> убедитесь, что вы добавили и зафиксировали все файлы темы, включая css, который строится из scss, чтобы они загрузились на рабочий сайт, когда вы отправите эти изменения.

Ответ или решение

Теория:
Когда вы работаете с темы WordPress, ваше локальное окружение часто используется для разработки и тестирования перед тем, как выгрузить изменения на производственный сайт. Если ваши стили исчезают после загрузки на живой сайт, это может быть связано с процессом компиляции SCSS в CSS и тем, как эти файлы управляются и кэшируются.

SCSS (Sassy CSS) — это препроцессор для CSS, который позволяет использовать переменные, вложение, миксины и другие функции, чтобы делать стилизацию более удачной и поддерживаемой. Однако браузеры не читают SCSS напрямую — они читают только CSS. Следовательно, SCSS необходимо скомпилировать в CSS перед тем, как его можно будет применить на вашем сайте.

Для компиляции SCSS в CSS часто используются инструменты вроде Gulp, Webpack или Grunt. Эти инструменты автоматизируют процесс сборки ресурсов, включая компиляцию SCSS, минификацию CSS, объединение файлов и другую оптимизацию перед публикацией на живом сайте.

Пример:
В вашем случае, вероятно, используется один из таких инструментов для генерации CSS из SCSS. Поиск файлов, таких как package.json, gulpfile.js или webpack.config.js в папке вашей темы, может помочь определить, каким образом ваши SCSS файлы превращаются в CSS.

Если в вашем package.json присутствует раздел scripts, это может включать команды для начала процесса компиляции. Например, вы можете найти скрипт под названием build или dev, который выполняется командой npm run build или npm run dev, чтобы скомпилировать CSS.

Применение:

Поиск и компиляция SCSS: Прежде всего, определите, где лежит ваш SCSS файл и компилируется ли он в CSS. Найдите и изучите package.json в вашем проекте; если он есть, выполните npm install в командной строке для установки всех зависимостей. Затем запустите команду сборки, определённую в scripts. Это может быть npm run build в зависимости от вашего конфигурационного файла.
Редактирование и тестирование CSS: После успешной компиляции в CSS, вы можете протестировать изменения локально, прежде чем выгрузить их на живой сайт. Убедитесь, что ваш браузер загружает последнюю версию стилей, очистив кэш страницы (Ctrl+F5 на Windows или CMD+R на macOS).
Работа с версией кода: Если вы используете систему контроля версий, такую как Git, важно убедиться, что все файлы, связанные с вашей темой — включая скомпилированные CSS — добавлены и закомичены. Это обеспечит их присутствие на вашем производственном сайте после git push.
Решение проблем кэша: Иногда после обновления CSS изменений не видно из-за проблем с кэшированием. Проверьте свой серверный кэш и любые кеш-расширения в браузере. Вы можете временно отключить кеширование или очистить кэш, чтобы убедиться, что ваши изменения становятся видимыми.
Настройка через WordPress: В качестве временной меры вы можете добавлять или переопределять стили через панель администрирования WordPress. Это особенно полезно, если нет доступа к процессу сборки, либо если нужно внести быстрые изменения. В разделе Внешний вид → Настроить → Дополнительный CSS вы можете вставить свои CSS-правила.

Заключение:
Следуя вышеописанному процессу, вы сможете исправить проблему исчезновения стилей. Регулярное тестирование ваших изменений локально и перекомпиляция SCSS в CSS до загрузки на сервер поможет избежать подобных проблем в будущем. Убедитесь, что ваш процесс сборки чётко определён и что файл конфигурации контролируется редактированием и тестированием перед каждой загрузкой на живой сайт.