Astroの制作環境を自分好みにカスタムする方法
Webサイトのコーディング経験がある方であれば、ある程度自分の慣れた制作環境というものがあるかと思います。
そこでこの項では、Astroの制作環境を自分の使いやすいように構築する一例をご紹介します。
Sass（SCSS）を使用する場合
CSSプリプロセッサのSassを使用する場合は、まずターミナルでプロジェクトにSassをインストールします。
npm install sass
.astroファイル内で、<style lang="scss">を指定することで、AstroコンポーネントにSCSS記法でCSSを記述することができます。
---
---
<html lang="ja">
（...略）
<body>
<h1>Welcome to Astro</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia odio non explicabo ab deserunt doloremque praesentium.
nemo aliquam minima quis, animi error velit quos officiis quaerat.
magnam minus amet esse!</p>
</body>
</html>
<style lang="scss">
$h1-color: #ffff00;
@mixin my-mix-in {
padding: 1rem;
border: 1px solid #fff;
font-size: 3rem;
color: $h1-color;
}
body {
padding: 1rem;
background-color: #222;
color: #fff;
font-size: 1.5rem;
h1 {
@include my-mix-in;
}
}
</style>
第3回でご説明したように、SCSS記法でもAstroコンポーネントにおけるCSSスコープ化が有効であるため、普段SCSS記法に慣れた方であれば、Astroでも手軽に導入することができます。
また、外部のSCSSファイルを使用する場合は、CSSファイルと同様にAstroコンポーネントにインポートすることもできます。
---
import "../css/global.scss";
---
<html lang="ja">
（...略）
<body>
<h1>Welcome to Astro</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Officia odio non explicabo ab deserunt doloremque praesentium.
nemo aliquam minima quis, animi error velit quos officiis quaerat.
magnam minus amet esse!</p>
</body>
</html>
PostCSSを使用する場合
Sassで使用していた変数やネストなどの便利機能の多くは、すでにネイティブのCSSでも記述できるようになっているため、最小限のプラグインでCSSをシンプルに記述するならば、PostCSSも選択肢の一つです。
AstroにはデフォルトでPostCSSが組み込まれているため、プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成し、プラグインを個別にインポートします。
module.exports = {
plugins: [
require('postcss-preset-env'),
require('autoprefixer'),
],
};
そして、Astroコンポーネント内でPostCSSとして記述することができます。
---
---
<html lang="ja">
（...略）
</html>
<style>
:root {
--h1-color: #ffff00;
}
body {
padding: 1rem;
color: #fff;
font-size: 1.5rem;
h1 {
padding: 1rem;
border: 1px solid #fff;
font-size: 3rem;
color: var(--h1-color);
}
}
</style>
外部PostCSSファイルとして運用する場合は、@importによる複数ファイルの統合も可能です。
@import "foundation/body.css"; @import "object/button.css";
--- import "../css/global.css"; --- <html lang="ja"> （...略） </html>
TailwindCSSを使用する場合
汎用的なutility classを組み合わせて構築するTailwindCSSフレームワークを使用する場合は、Astroのインテグレーション機能を使って簡単に導入することができます。
ターミナルで以下のコマンドを実行すると、TailwindCSSを有効化するためのセットアップが始まります。
npx astro add tailwind
これだけで、必要なライブラリのインストールと、tailwind.config.mjsの初期設定が完了するので、Astroコンポーネント内ですぐにTailwindCSS記法を使用することができます。
---
---
<html lang="ja">
（...略）
<body class="p-4 bg-black text-white text-2xl">
<h1 class="p-4 border border-solid border-white text-5xl text-[#ffff00]">
Welcome to Astro</h1>
</body>
</html>
TailwindCSSに代表されるutility class系の記述方式は、一見すると記述量が増えて読みにくく思えますが、Astroのコンポーネント運用とはとても相性が良く、クラス名で管理・設計する必要がなく、効率的な開発を行うこともできます。
CSSの記述方式・管理方法については人によって大きく異なる部分でもあり、作業効率に直結してくるため、既存の慣れた制作環境をAstroにどのように最適化するかを模索してみると良いかもしれません。
