Cannot compile .scss into bundle.css

I spent the whole day Googling things such as "How to compile sass into css with Rollup and postcss". I have looked hundred of times at the documentation and code implementation, but I can't figure out how to compile all my `.scss files` under `src/styles` to `dist/bundle.css` and I have even less of a clue on how to configure my `es-dev-server` to allow me dynamically changing the files and re-bundling.

Could someone please advice on how to do?

This is what I managed to come up with but without a verbose option it is hard to debug and see what is wrong.
```js
export default merge(baseConfig, {
// if you use createSpaConfig, you can use your index.html as entrypoint,
// any inside will be bundled by rollup
input: './index.html',
plugins: [
analyze(),
postcss({
use: ['sass'],
plugins: [autoprefixer(), cssnano()],
extract: true,
modules: true,
minimize: true,
extensions: ['.scss', '.css'],
}),
],

// alternatively, you can use your JS as entrypoint for rollup and
// optionally set a HTML template manually
// input: './app.js',
});
```