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を使用するデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年8月
 12
3456789
10111213141516
17181920212223
24252627282930
31