AstroでBootstrapを使う

2024-05-01

本ブログはBootstrap 5 を使用している。

CDN版のBootstrapを使うと、いかにもBootstrap感が出るが、せっかくsassのコンパイルができる環境なので、色などカスタマイズするとちょっと楽しい。

AstroにBootstrapを導入

npm install bootstrap

AstroでBootstrapを使う

いちばん外側のLayoutに styleタグを書いてよい。buildするとCSSは外部ファイルに書き出されるので、本番用のファイルは汚くならない。

<!doctype html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{title}{title && ' | '}{siteName}</title>
        <style lang="scss" is:global>

            // 色やフォント、隙間、角丸などカスタマイズ
            $blue:    #cc0000;
            $font-family-sans-serif: "Meiryo UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

            @import "bootstrap/scss/bootstrap"

        </style>
    </head>
    <body>
        <header>
（以下略）