約8年前に制作したサイトの修正依頼がありました。昨年の6月頃に修正した際には何ともなかったのですが、SCSSで突然エラーや警告が出るようになりました。特に@importについてはめちゃくちゃ手こずったのでその備忘録的なお話です。
- 8年前に構築したSCSS
- 昨年まではコンパイルエラーなし
- 今年からVS Codeで警告やエラーが発生
- 特に
@importや複雑なセレクタ部分で表示
「コードは変えていないのに、なぜ？」
その原因は Sass本体の仕様変更 にあります。
Dart Sassへの完全移行と@importの完全非推奨化
原因は主にこの2つです。
- Dart Sassへの完全移行
@importの正式非推奨化（Deprecation）
8年前のSCSSは「Ruby Sass」や「node-sass」時代の書き方です。
現在のSassは内部仕様が大きく変わっています。
Sassの歴史と転換点
Sassは大きく3つの時代があります。
| 時代 | 状態 |
|---|---|
| Ruby Sass | 2019年終了 |
| node-sass | 2020年以降停止 |
| Dart Sass | 現在の公式実装 |
2020年以降、Dart Sassが唯一の公式実装になりました。
@import が非推奨になったのはいつ？
2020年10月
Sass公式が @import を非推奨（Deprecation）と発表。
2023年以降
警告が強化される。
2024〜2025年
VS Code拡張やビルドツールが
Dart Sass最新バージョンを使うようになり、警告が明確化。
つまり、
昨年までは古いSassが動いていた可能性が高い
ということです。
なぜ昨年まではエラーが出なかったのか？
可能性はこの3つ。
✔ node-sassを使用していた
→ 旧仕様に寛容
✔ 古いDart Sassバージョン
→ DeprecationがWarning扱いだった
✔ VS Codeの拡張が古かった
→ Linterが弱かった
今年になって：
- Sass拡張のアップデート
- Dart Sassの自動更新
- VS Codeの内部CSSエンジン更新
が重なり、
非推奨が明確にエラー扱いになったと考えられます。
ずっと使っていたわけではなかったので、急に古いSCSSを修正することになった場合、想定以上に修正コストがかかる恐れがあることをご理解ください。
実際に出るエラー例
❌ @import 使用時
@import "variables";
@import "mixin";→ 現在は推奨されない
❌ グローバル変数の再定義
Dart Sassはスコープ管理が厳格です。
❌ 複雑なセレクタ構造
8年前は問題なかった書き方でも、現在はLinterが警告を出します。
正しい現在の書き方
✔ @use を使う
@use "variables";
@use "mixin";名前空間付きになります。
@forward を使う
モジュール集約には：
@forward "variables";
@forward "mixin";なぜSassは@importをやめたのか？
理由は：
- グローバル汚染
- 依存関係が不明瞭
- ビルド速度の問題
- 重複読み込み問題
モジュール方式にすることで、
✔ スコープが明確
✔ 再利用しやすい
✔ ビルドが高速
になります。
8年前のSCSSは危険なのか？
結論：
❌ 今すぐ動かなくなるわけではない
⚠ しかし将来的に完全削除される可能性あり
Sass公式は「将来的に@importは削除する」と明言しています。
今どうすべきか？
選択肢は3つ。
① 警告を無視する（短期対応）
小規模修正のみなら可。
② Sassバージョンを固定する
package.jsonで指定：
"sass": "1.62.0"③ モジュール化へ移行（推奨）
- @use へ書き換え
- 変数を整理
- mixinを再構成
まとめ
今回エラーが出た理由は、
- コードが壊れたからではない
- WordPressが原因でもない
- SCSS設計ミスでもない
Sassの進化が原因です。
8年前のSCSSは当時は正解だった設計。
しかし現在は：
- Dart Sass標準
- @import非推奨
- Linter強化
という環境に変わっています。
結論
8年前に正しかったSCSSは、今でも間違いではありません。
しかし、
- Sassはモジュール化へ移行済み
- @importは非推奨
- Linterは年々厳格化
という流れの中で、「古い設計」が浮き彫りになっただけです。
長期運用するテーマやプロジェクトは、一度モジュール設計への見直しを検討するタイミングに来ています。
