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

Question

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.

Answer 1

You can use the option build.cssCodeSplit to turn off the runtime CSS injection.

From the Vite docs:

If you'd rather have all the CSS extracted into a single file, you can disable CSS code splitting by setting build.cssCodeSplit to false.