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。您不需要安装任何东西。只需将您的sass变量包括在该块的scss文件中即可。例如-

如果这是您的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变量

3 个答案:

安装

导入