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

Question

我使用 create-guten-block 存储库为 Wordpress 创建了一个支持 ES6 的漂亮 Gutenberg 块。但是我希望能够使用在 gutenberg 存储库中定义的 scss 变量：

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

不幸的是，无法通过 npm 包安装资产。那么我如何将变量包含在我的自定义 gutenberg 块中呢？我想在块的 style.css

中做这样的事情

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

我怎样才能达到我想要的

Answer 1

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

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

如果这是您的 block directory，那么在 style.scss 和 editor.scss 中放入 SASS 变量。

希望对您有所帮助

Answer 2

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

@import "./variables";

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

你不能使用

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

这将不起作用，因为您正在尝试导入一个无法识别样式的 npm 包。

Answer 3

安装

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 和其他一些东西，请在此处查看 full docs。

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

Include Gutenberg scss Variables in Custom Gutenberg Block

wordpress

wordpress-gutenberg

安装

导入