Build one css file in astro framework

Question

In Astro.js after the build I get 3 separate CSS files:

<link rel="stylesheet" href="./assets/asset.d445157f.css" />
<link rel="stylesheet" href="./assets/asset.71926ed3.css" />
<link rel="stylesheet" href="./assets/asset.e5ceecbe.css" />

But what I want is to get only one file, e.g.:

<link rel="stylesheet" href="./assets/style.css" />

Is there any way to achieve that in Astro?

For now, I am scaling these 3 files manually into 1 after the build.

Answer 1

Here is how I solved it using Rollup config:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  output: 'static',
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: 'assets/[name][extname]',
        }
      }
    }
  }
});