# Roots webpack styles not injecting in editor

**URL:** https://discourse.roots.io/t/roots-webpack-styles-not-injecting-in-editor/28839
**Category:** sage
**Tags:** webpack, gutenberg
**Created:** 2024-10-23T10:32:32Z
**Posts:** 4

## Post 1 by @lcottingham — 2024-10-23T10:32:32Z

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?

---

## Post 2 by @lcottingham — 2024-10-23T10:38:30Z

**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?

---

## Post 3 by @dalbeck — 2024-10-23T13:13:35Z

@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();
});
```

---

## Post 4 by @lcottingham — 2024-10-24T07:54:32Z

> [@dalbeck](#):
>
> ```
> app.build.items.precss.setLoader('minicss');
> app.hooks.action('build.before', (bud) => {
> bud.extensions
> .get('@roots/bud-extensions/mini-css-extract-plugin')
> .enable();
> });
> ```

You’re a gem! Thank you. Simple solution