Include Gutenberg scss Variables in Custom Gutenberg Block

0
votes

I use the create-guten-block repo to create a nice ES6-enabled Gutenberg block for Wordpress. However I want to be able to use scss-variables that are defined in the gutenberg repository here:

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

Unfortunately the assets cannot be installed via an npm package. So how would I include the variables in my custom gutenberg block? I want to do something like this in the block's style.css

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

How can I achieve what I want

3
wordpresswordpress-gutenberg
You migth have to configure webpack for the proper paths - CyberJunkie
github.com/gdi2290/angular-starter/issues/727 loader: 'sass-loader', options: { "includePaths": [ require('path').resolve(__dirname, 'node_modules') ] } - snnsnn

3 Answers

2
votes

That is not possible unless you copied the exact file and referred to it like this inside your scss file

@import "./variables";

What you need to do is create _variables.scss inside the same folder as your main scss file is, then use the code above to import it. You'll have to go inside the file _variables.scss as well and make sure all variables are defined, meaning, import any dependency that is needed for this file. I'm pointing here to the _colors.scss dependency in the same folder, and that's all you need.

You can't use 

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

this won't work because you're trying to import an npm package, which does not recognize styles.

0
votes

If I understand your question correctly. You want to use SASS variables inside your custom Gutenberg block, right ?

If you are using create-guten-block. You don't need to install anything. Just include your sass variable in that block's scss files.For example -

If this is your block directory then inside style.scss and editor.scss put the SASS variables.

I hope this helps

0
votes

Install

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

Import

@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";

They also support postCSS and a few other things, check here for the full docs.