Roots webpack styles not injecting in editor

sage
,
1

I’m a little puzzled as to why the editor styles aren’t being injected into the document when viewing the Gutenberg page editor. This is only an issue when running yarn dev and only works when I run build (so I generate static CSS files instead).

In yarn dev, the editor loads the editor.js file fine. The CSS loader doesn’t appear to inject the CSS into the DOM though. As a result, the block editor is fully unstyled with my base theme styles when running dev mode.

I have added the code as recommended by the docs, here.

add_action('after_setup_theme', function () {
    add_theme_support('editor-styles');
    add_editor_style(asset('app.css')->relativePath(get_theme_file_path()));
});

I have also tried this:

add_action('enqueue_block_editor_assets', function () {
    bundle('editor')->enqueue();
}, 100);

add_action('enqueue_block_assets', function () {
    bundle('editor')->enqueue();
}, 100);

The above code loads the editor.js file in dev mode. The add_editor_style adds the compiled CSS when full built in build mode.

So, why is my block editor still unstyled?

2

Correction
So, the styles are being injected into the head. However, they are not being applied to the editor blocks?

For example, my editor CSS has a set of simple hard test styles. These are all being injected into the head, however, visually, these are not being applied.

The code injected into the looks like this:

<style>.wp-block {
  background-color: #f5f5f5;
  color: red !important;
}

p {
  color: red !important;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3N0eWxlcy9lZGl0b3Iuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLHlCQUF5QjtFQUN6QixxQkFBcUI7QUFDdkI7O0FBRUE7RUFDRSxxQkFBcUI7QUFDdkIiLCJzb3VyY2VzQ29udGVudCI6WyIud3AtYmxvY2sge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1O1xuICBjb2xvcjogcmVkICFpbXBvcnRhbnQ7XG59XG5cbnAge1xuICBjb2xvcjogcmVkICFpbXBvcnRhbnQ7XG59Il0sInNvdXJjZVJvb3QiOiIifQ== */</style>

Do we know why this is?

3

@lcottingham

Try adding the following to your bud.config.js

app.build.items.precss.setLoader('minicss');
app.hooks.action('build.before', (bud) => {
bud.extensions
    .get('@roots/bud-extensions/mini-css-extract-plugin')
    .enable();
});
1 Like
4

You’re a gem! Thank you. Simple solution

1 Like