0

我使用create-guten-block repo 为 Wordpress 创建了一个不错的支持 ES6 的 Gutenberg 块。但是我希望能够在这里使用在古腾堡存储库中定义的 scss 变量：

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

不幸的是，这些资产不能通过 npm 包安装。那么如何将变量包含在我的自定义古腾堡块中？我想在街区做这样的事情style.css

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

我怎样才能达到我想要的

4

3 回答 3

2

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

@import "./variables";

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

你不能使用

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

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

于 2019-05-20T19:33:58.223 回答
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 和其他一些东西，请在此处查看完整文档。

于 2019-11-26T07:19:09.587 回答
0

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

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

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

我希望这有帮助

于 2018-11-04T09:46:52.723 回答