Для подключения SCSS к WordPress вам понадобятся несколько шагов.
Шаг 1: Установка необходимых инструментов
Первым делом вам нужно установить SASS, чтобы иметь возможность компилировать SCSS в CSS. Для этого вам понадобится Node.js и пакетный менеджер npm.
1.1 Установите Node.js, загрузив его установщик с официального сайта: https://nodejs.org
1.2 После завершения установки Node.js, откройте командную строку и введите команду node -v, чтобы проверить, установился ли Node.js правильно.
1.3 Далее у вас должен быть доступен npm. Проверьте его, введя команду npm -v.
Шаг 2: Создание проекта WordPress
2.1 Создайте новую папку для своего проекта WordPress.
2.2 В командной строке перейдите в созданную папку и выполните команду npm init, чтобы инициализировать проект и создать файл package.json.
Введите запрашиваемую информацию (название проекта, версия и т. д.) или просто нажмите Enter для принятия значений по умолчанию.
Шаг 3: Установка пакетов SASS
3.1 Выполните команду npm install node-sass --save-dev, чтобы установить пакет SASS для проекта. Флаг --save-dev добавит его в список зависимостей разработки в файле package.json.
Шаг 4: Создание директорий для файлов SCSS и CSS
4.1 В основной папке вашего проекта создайте папку scss для файлов SCSS.
4.2 В папке scss создайте файл style.scss, который будет содержать весь ваш SCSS код.
Шаг 5: Настройка компиляции SCSS в CSS
5.1 В корневой папке вашего проекта создайте файл .sassrc (с точкой в начале), чтобы указать настройки компиляции SASS.
{
"outputStyle": "expanded",
"sourceComments": true
}
Этот файл определяет, как будет происходить компиляция SCSS в CSS. Вы можете настроить вывод стилей (например, сжатие, развернутое или компактное представление) в поле outputStyle.
5.2 В package.json файле добавьте следующий скрипт в раздел "scripts":
"scripts": {
"sass": "node-sass scss/style.scss -o css"
}
Этот скрипт будет компилировать SCSS в CSS при запуске команды npm run sass.
Шаг 6: Запуск компиляции SCSS в CSS
6.1 Запустите команду npm run sass в командной строке, чтобы запустить компиляцию SCSS в CSS.
6.2 В результате должна быть создана папка css с файлом style.css, содержащим скомпилированные стили из style.scss.
Шаг 7: Подключение стилей к WordPress
7.1 В файле functions.php вашей темы WordPress добавьте следующий код для подключения стилей:
function enqueue_styles() {
wp_enqueue_style('theme-styles', get_stylesheet_directory_uri() . '/css/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_styles');
Этот код использует функцию wp_enqueue_style, чтобы добавить стили из файла style.css в заголовок вашего сайта.
Теперь ваши стили из файлов SCSS будут автоматически компилироваться в CSS при каждом изменении и подключаться к вашему сайту WordPress.
Конечно, это только основная настройка, и вы можете продолжить настраивать компиляцию SCSS и использовать более сложные функции SASS в своих проектах WordPress.