# Webpack hot module replacement doesn't inject custom scss

**URL:** https://discourse.roots.io/t/webpack-hot-module-replacement-doesnt-inject-custom-scss/16313
**Category:** sage
**Tags:** webpack
**Created:** 2019-08-09T14:39:15Z
**Posts:** 2

## Post 1 by @JesseVelden — 2019-08-09T14:39:16Z

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": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ],
    "blockexample": [
      "./scripts/blocks/example.js",
      "./styles/blocks/example.scss"
    ]
  },
  "publicPath": "/wp-content/themes/xxxxxx",
  "devUrl": "http://localhost:8888",
  "proxyUrl": "http://localhost:3333",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
```

And my php injection:

```
add_action( 'init', function () {
    if ( ! function_exists( 'register_block_type' ) ) {
        // Gutenberg is not active.
        return;
    }
    wp_register_script(
        'gutenberg-examples-05-esnext',
        asset_path('scripts/blockexample.js'),
        ['wp-blocks', 'wp-element', 'wp-editor', 'underscore'],
        null
    );
    wp_register_style(
        'gutenberg-examples-05-esnext',
        asset_path('styles/blockexample.css'),
        false,
        null
    );
    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](https://discourse.roots.io/t/managing-scss-themes-with-webpack/9293/18)

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:

---

## Post 2 by @hseyeved — 2020-07-02T17:59:47Z

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

Thanks.