Cannot compile .scss into bundle.css

[aress31]

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.

export default merge(baseConfig, {
  // if you use createSpaConfig, you can use your index.html as entrypoint,
  // any <script type="module"> 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',
});