Individual SASS/CSS files for blocks

[mbaierl]

Hey, great starter theme, but it would be amazing to add support to be able to add individual block level SASS/CSS files to the theme.

So adding "style": [ "file:./myblock.css" ], works when adding a "myblocks.scss" file to the blocks/myblock/ directory.

Thanks, Michael

[them-es]

Hi @mbaierl,

thanks for your positive feedback. In general providing a per-block control via block.json or via theme.json is best-practice. But it's also good practice for a Starter Theme to only provide a basic configuration w/o too much noise like an individual block setup - and in the end it should be fairly easy to add a working SASS setup on your own.

If you've incorporated e.g. https://github.com/them-es/wordpress-blocks-starter into your Theme you could modify your configuration in webpack.config.js to something like:

entry: {
    main: ['./main.scss', './main.js'],
    block1: './block1.scss',
},

Once the SCSS compilation for the custom blocks works you need to reference the CSS file in each block.json and run the build command afterwards.

E.g. Custom block 1 /blocks/src/block1/block.json: "style": [ "file:../../../assets/dist/block1.css" ]

Core block styles for Paragraphs, Headings, Cover blocks, etc. should be extended or modified in theme.json:

"blocks": {
    "core/paragraph": {
        "color": {},
        "custom": {},
        "layout": {},
        "spacing": {},
        "typography": {}
    },
    "core/heading": {},
    "etc": {}
}

If that's insufficient or if you want to use SASS for core blocks it would be just fine to format them globally via main.scss.

You should get the idea and hopefully this information is useful for you. Feel free to share any further comments in this thread!

[mbaierl]

Thank you, that's how I actually solved it as well.

And again thank you for providing the starter theme.