Roots Discourse

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

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: