AstroでpublicディレクトリにCSSファイルを設置する

Astroの作業環境を使いつつ、CSSだけAstro外で管理したいということがあったので、Astro外で管理しつつ最終的にpublicディレクトリにCSSファイルを格納する方法を試してみます。

設定方法

今回はSassも使って、scripts/css/style.scss で管理しつつ public/assets/css/style.css に追加する想定で設定してみます。
まずはsassのパッケージと、npm scriptの並列実行をするためにnpm-run-allのパッケージをインストールします。

npm install sass npm-run-all --save-dev

package.jsonで下記を変更して、Sassの監視やビルド時にCSSファイルを圧縮するように設定します。

{
  ～略～
  "scripts": {
    "astro:dev": "astro dev",
    "astro:build": "astro build",
    "scss:watch": "sass scripts/css:public/assets/css --no-source-map --watch",
    "scss:build": "sass scripts/css:public/assets/css --no-source-map --style=compressed",
    "dev": "run-p astro:dev scss:watch",
    "build": "run-s scss:build astro:build",
    "preview": "astro preview",
    "astro": "astro"
  },
  ～略～
}

npm run dev 実行時にはAstroの環境起動と並行してSassの監視を行い(scss:watch)、変更があった際はpublicディレクトリ内にCSSファイルを生成するようにしています。
npm run build 実行時にはCSSを圧縮状態に変更して(scss:build)、その後Astroのビルド処理を実行するようにしています。

次にastro.config.mjsで下記を追記して、CSS変更時にブラウザをリロードするようにします。

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

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'watch-public-css',
        handleHotUpdate({ file, server }) {
          // publicディレクトリ内のcssファイルが更新されたらブラウザを更新
          if (file.includes('public') && file.endsWith('.css')) {
            server.ws.send({
              type: 'full-reload',
              path: '*'
            });
          }
        },
      }
    ]
  },
});

これで準備ができたので、scripts/css/ に style.scssを追加します。
例として以下の内容にします。

$color: tomato;

body {
  background-color: lightgreen;
}
h1 {
  color: $color;
}

Layout.astroにCSSの読み込み追加します。

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

これでAstro外でCSS(Sass)を管理しつつ、随時publicディレクトリに反映できるようになりました。
設定後のデモページ