问在自定义Gutenberg块中包含Gutenberg scss变量

EN

这是不可能的，除非您复制了确切的文件并在scss文件中这样引用它。

@import "./variables";

您需要做的是在与主scss文件相同的文件夹中创建_variables.scss，然后使用上面的代码导入它。您还必须进入文件_variables.scss，并确保定义了所有变量，这意味着导入该文件所需的任何依赖项。我在这里指向同一个文件夹中的_colors.scss依赖项，这就是您所需要的。

你不能用

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

这将无法工作，因为您试图导入一个npm包，它不识别样式。

安装

npm install @wordpress/base-styles --save-dev

导入

@import "node_modules/@wordpress/base-styles/colors";
@import "node_modules/@wordpress/base-styles/variables";
@import "node_modules/@wordpress/base-styles/mixins";
@import "node_modules/@wordpress/base-styles/breakpoints";
@import "node_modules/@wordpress/base-styles/animations";
@import "node_modules/@wordpress/base-styles/z-index";

他们还支持postCSS和其他一些东西，在这里查看完整的文档。

如果我正确理解你的问题。您希望在自定义的Gutenberg块中使用SASS变量，对吗？

如果您正在使用创建-guten-块。你不需要安装任何东西。只需将sass变量包含在该块的scss files.For示例中-

如果这是您的块目录，那么在style.scss和editor.scss中放置SASS变量。

我希望这能帮到你