Astroで生成されるCSSを1つにまとめる

以前にAstroでCSSファイルを任意の名前にする方法を試しましたが、生成されるファイルを分割しないことによってやりたかったことができそうだったので方法をメモしておきます。

サンプルコード

ページの構成については以前の記事と同じです。
astro.config.mjs でcssCodeSplitの設定を追加します。

// @ts-check
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  build: {
    inlineStylesheets: 'never'
  },
  vite: {
    build: {
      cssCodeSplit: false,
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            if (assetInfo.name?.endsWith(".css")) {
              return "assets/style[extname]";
            }
            return "assets/[name].[hash][extname]";
          },
        },
      },
    },
  },
});

cssCodeSplitはViteの設定で、CSSコードの分割を有効にするかどうかを設定できます。
これでCSSファイルはassets/style.cssのみ生成されるようになりました。
CSSファイルを分割しないデモページ