Webpack hot module replacement doesn't inject custom scss

When adding my custom scss to config.json it doesn’t get properly injected by the webpack hot module replacement with yarn watch. I know that it I get a 404 in the browser and that is ok behaviour.

I’ve checked that it is properly compiled by webpack, and that’s the case. It is even reloading the page when I change the file, but somehow it doesn’t actually inject my scss.
It works when I run yarn build, as then it just places the compiled css into the dist folder. Another solution is to import it in main.scss, but I do not prefer that really. Am I missing something obvious?

My config.json:

  "entry": {
    "main": [
    "customizer": [
    "blockexample": [
  "publicPath": "/wp-content/themes/xxxxxx",
  "devUrl": "http://localhost:8888",
  "proxyUrl": "http://localhost:3333",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [

And my php injection:

add_action( 'init', function () {
    if ( ! function_exists( 'register_block_type' ) ) {
        // Gutenberg is not active.
        ['wp-blocks', 'wp-element', 'wp-editor', 'underscore'],
    register_block_type( 'gutenberg-examples/example-05-recipe-card-esnext', [
        'style' => 'gutenberg-examples-05-esnext',
        'editor_script' => 'gutenberg-examples-05-esnext',

Edit: related? Managing SCSS themes with Webpack - #18 by benword

Edit 2: I t was indeed this issue listed above. I solved it by using laravel-mix, as also now used in Sage 10… If anyone wants to know how I did it, just reply to this thread :slight_smile:

Hey @JesseVelden, came across this post. Would be great to hear how you solved this? Dealing with the same thing currently.