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

时间:2018-11-02 04:27:16

标签: wordpress wordpress-gutenberg

我使用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"

我如何实现自己想要的

3 个答案:

答案 0 :(得分:0)

如果我正确理解您的问题。您想在自定义Gutenberg块中使用SASS变量,对吗?

如果使用create-guten-block。您不需要安装任何东西。只需将您的sass变量包括在该块的scss文件中即可。例如-

如果这是您的block directory,则在style.scss和editor.scss内部放置SASS变量。

我希望这对您有帮助

答案 1 :(得分:0)

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

@import "./variables";

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

您不能使用

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

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

答案 2 :(得分:0)

安装

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