Включить переменные Gutenberg scss в пользовательский блок Gutenberg

Question

Я использую репозиторий create-guten-block , чтобы создать хороший блок Gutenberg с поддержкой ES6 для Wordpress. Однако я хочу иметь возможность использовать scss-переменные, которые определены в репозитории Гутенберга здесь:

https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_variables.scss

К сожалению, ресурсы не могут быть установлены через пакет npm. Итак, как бы я включил переменные в свой пользовательский блок Гутенберга? Я хочу сделать что-то подобное в блоке style.css

import "~@wordpress/assets/styles/variables"

Как мне добиться того, чего я хочу

Answer 1

Это невозможно, если вы не скопировали точный файл и не указали на него в файле scss следующим образом

@import "./variables";

Что вам нужно сделать, это создать _variables.scss в той же папке, где находится ваш основной scss-файл, а затем использовать приведенный выше код для его импорта. Вам также нужно будет зайти в файл _variables.scss и убедиться, что все переменные определены, то есть импортировать все зависимости, которые необходимы для этого файла. Я указываю здесь на зависимость _colors.scss в той же папке, и это все, что вам нужно.

Вы не можете использовать

import "~@wordpress/assets/styles/variables"

это не сработает, потому что вы пытаетесь импортировать пакет npm, который не распознает стили.

Answer 2

Если я правильно понимаю ваш вопрос. Вы хотите использовать переменные SASS внутри своего пользовательского блока Гутенберга, верно?

Если вы используете create-guten-block. Вам не нужно ничего устанавливать. Просто включите вашу переменную sass в файлы scss этого блока. Например -

Если это ваш каталог блоков , то внутри style.scss и editor.scss поместите переменные SASS.

Надеюсь, это поможет