Sassを利用する

sassをインストールする。

npm i sass

変数やmixinなど共通で利用するスタイルをグローバルに定義する

例)src/styles/variables.scssを作成

astro.config.mjsに設定を追加する。 ちなみに、as *は名前空間の指定で、仮にas varとした場合はvar.$color-primaryといった指定になる。

export default defineConfig({
  ---中略---
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "src/styles/variables.scss" as *;`
        }
      }
    }
  }
});

リセットCSSを追加

リセット用のCSSにはthe-new-css-resetを利用します。

npm i the-new-css-reset

全てのファイルに利用するsrc/Layout.astroなどでthe-new-css-resetをimportします。

---
import "the-new-css-reset";
~~~中略~~~
---