How to extract css as a separate .css file in Vite?

In webpack it is possible to generate output in such a way:

• 1 file with bundled js code
• 1 file with bundled css

This is part of the webpack config, that results in such output:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...

plugins: [
  new MiniCssExtractPlugin({
    filename: 'assets/css/styles.css',
    chunkFilename: '[id].css',
  }),
  ...
],

...

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
  ],
},

...

How to achieve this with vite?

The vite templates by default generate config, where js and css are bundled into a single file and css is injected at runtime.

from How to extract css as a separate .css file in Vite?