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

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение

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

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

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

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

Если вы не знакомы с компиляцией scss->css или не можете найти файлы package.json и webpack.config.js или gulpfile.js в директории вашей темы, вы можете либо искать скомпилированный css файл, который фактически загружается и обычно минимизируется для внесения изменений. Вы можете просто переопределить стили своими в админ-панели wordpress Appearance -> Customize -> Additional 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, в который вы вносите изменения, но эти изменения не отражаются на сайте. Давайте разберемся, как можно решить эту проблему.

Теория

Начнем с понимания, как работает процесс преобразования файлов .scss в .css. SCSS (Sassy CSS) – это язык стилей, являющийся расширением CSS. SCSS позволяет использовать переменные, вложенные правила, миксины, функции и другие особенности, которые делают разработку стилей более гибкой и управляемой. Однако браузеры не могут напрямую интерпретировать SCSS. Поэтому сначала нужно преобразовать SCSS в CSS с помощью компилятора, такого как Gulp или Webpack, которые часто используются в темах WordPress для автоматизации этого процесса.

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

Пример

Предположим, в вашей теме WordPress используется Gulp для компиляции SCSS в CSS. Обычно в корневой директории темы можно найти файл gulpfile.js, который содержит задачи для автоматизации. Он может выглядеть примерно так:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(){
  return gulp.src('scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('sass'));
});

Этот скрипт считывает все SCSS файлы из папки scss, компилирует их в CSS, и сохраняет в папке css. Команда gulp watch автоматически отслеживает изменения в SCSS файлах и повторно компилирует их после каждого изменения.

Применение

Теперь, когда мы разобрались с теорией и примером, перейдем к конкретным шагам, которые необходимо выполнить для решения вашей проблемы.

Проверка наличия инструментов сборки: Определите, какие инструменты используются в вашей теме для обработки SCSS. Ищите файлы package.json, gulpfile.js, или webpack.config.js.
Установка зависимостей: Если в корне темы находится файл package.json, выполните команду npm install, чтобы установить все необходимые модули. Это необходимо для работы Gulp или Webpack scripts.
Компиляция SCSS в CSS: Найдите нужную команду для компиляции SCSS в CSS. Обычно она содержится в блоке scripts файла package.json. Например, команда может выглядеть как npm run build или gulp sass.
Обновление статических файлов на сервере: После того как вы выполните локальную компиляцию, убедитесь, что итоговый CSS файл загружен на ваш сервер. Это можно сделать с помощью инструментов развертывания вроде Git.
Очистка кэша браузера: После обновления файлов на сервере, не забудьте очистить кэш вашего браузера. Нажмите Ctrl+F5 или Cmd+R для полной перезагрузки страницы и обновления статических файлов.
Проверка компиляции: Если вы не знакомы с процессом компиляции или не уверены в его успешности, проверьте папку, куда собирается ваш CSS файл, и убедитесь, что он содержит актуальные изменения.
Настройка в WordPress: Для временного решения вы можете использовать возможность добавления пользовательских стилей через панель управления WordPress: Внешний вид -> Настроить -> Дополнительные стили CSS.

Заключительный совет: если вы используете систему контроля версий, как например GIT, перед отправкой на сервер всегда выполняйте команду git add -A, а затем git commit -m "Your message" и git push, чтобы избежать пропуска обновленных файлов.

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