AstroでSassを使用する

AstroでSassを導入する方法をメモ。

設定方法

Astroの環境にsassのパッケージを追加します。

npm install sass --save-dev

あとはstyleタグに lang=”scss” を付与すれば使用できます。

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

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

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

Sassを使用するデモページ