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タグでの出力になります。
コメントが承認されるまで時間がかかります。