Search code examples
wordpresswordpress-gutenberg

Include Gutenberg scss Variables in Custom Gutenberg Block

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

Solution

  • 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.