AstroでCSSを別ファイルとして出力する

Astroでスタイルを記述した際、デフォルトだとファイルサイズが小さい場合にはstyleタグで出力、一定以上の場合はCSSファイルとして出力されますが、この設定を変更する方法をメモ。

サンプルコード

最初に設定前のサンプルで、スタイルを複数用意してみます。
まずは src/layouts/Layout.astro です。

---
import '../assets/css/common.scss';
---

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
		<title>test</title>
	</head>
	<body>
		<slot />
	</body>
</html>

ここでは common.scss というファイルをインポートしています。
src/assets/css/common.scss の内容は次の通りです。

body {
  background-color: lightgreen;
}

次に src/components/Sentence.astro のコンポーネントを作成します。

---
const { text } = Astro.props;
---

<div>
  <p>{text}</p>
</div>

<style lang="scss">
$color: tomato;
div {
  padding: 50px;
  p {
    color: $color;
  }
}
</style>

最後に src/pages/index.astro で、上記コンポーネントを使用します。

---
import Sentence from '../components/Sentence.astro';
import Layout from '../layouts/Layout.astro';

---

<Layout>
	<h1>トップページ</h1>
	<Sentence
		text="センテンステキスト"
	/>
</Layout>

<style>
h1 {
  color: darkblue;
}
</style>

これで設定前のサンプルの用意ができました。
この内容でビルドを行うと、スタイルの内容が少ないためstyleタグで出力されます。
設定前のデモページ

次に別ファイルとして出力する設定方法ですが、 astro.config.mjs に以下を追記します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    inlineStylesheets: 'never'
  },
});

build.inlineStylesheets の項目を never とすることで、常に別ファイルのCSSとして出力されるようになります。
CSSを別ファイルで出力するデモページ

build.inlineStylesheets の初期値は auto で、デフォルトだと4kb より小さいスタイルの場合はstyleタグでの出力になるようです。
また、always を設定した場合は逆に常にstyleタグでの出力になります。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年7月
 12345
6789101112
13141516171819
20212223242526
2728293031