Webpack watch not showing properly styles on new entry SCSS

This is part of my config.json

"entry": {
  "main": [
    "./scripts/main.js",
    "./styles/main.scss"
  ],
  "single": [
    "./scripts/single.js",
    "./styles/single.scss"
  ],
  "customizer": [
    "./scripts/customizer.js"
  ]
},

I have added new entry called “single” and it has empty “single.js” and some style at “single.scss”.

When I run npm run build:production single_hash.css is compiled in dist/ folder. But when I run npm start, only the main styles being outputed.

e.g, in single.scss I wrote

body {
  max-width: 540px;
}

When in production mode, I can see the styles is correctly generated. But in development mode, the body max-width is not going as I wrote on the single.scss.

What I’m confused is, in development mode, it still showing webpack error if I wrote the wrong scss code structure in single.scss.

Is am I missing something?

"entry": {
  "main": [
    "./scripts/main.js",
    "./styles/main.scss",
    "./styles/single.scss"
  ],
  "customizer": [
    "./scripts/customizer.js"
  ]
},

The above config is working well in development mode. The styles is properly outputed. But in production mode, Its merged with main.scss.

Basicly, I want to create a seperate styles. So I can include the style on page that only needed it.

Help me out :frowning: