SCSSで変数作ったけどなぜかコンパイルでエラーになるときに確認すること

@import は非推奨

@importは現在推奨されていないので、代わりに@useを使う

// NG
@import 'foundation/variables';

// OK
@use 'foundation/variables' as var;

---

@useの注意点

1. 必要な変数があるファイルを呼ぶ

• 変数を使うファイルでは必ずその変数があるファイルを@useする
• style.scss で読み込んでも、header.scss で自動で使えるわけではない

@use '../foundation/variables' as var;

---

2. 名前空間をつける

• as 名前 をつけないと、ファイル内の変数や mixin が呼び出せない

@use '../foundation/variables' as var;

---

3. 変数を使うときは名前空間付きで

.header {
  height: var.$header-height;
  color: var.$color-gray;
}

---

まとめ

• @importは使わない
• @useでは各ファイルが独立している
• 名前空間付きで使うことが必須
• 変数や mixin を使う場合は、そのファイル自身で@useが必要