Sass @import が Vite で deprecated エラー・警告が消えない時の原因と移行手順【Dart Sass 2.0 対応】

公開日：2026-07-13／カテゴリ：Sass・Vite・CSS・フロントエンド／AnchorUp 技術ブログ

まず確認：Sass @import が動かない時の症状と対策（結論）

Dart Sass 1.80 以降、@import が非推奨となり、Vite を使ったビルドで大量の deprecation 警告が出るようになった。Dart Sass 2.0 では完全に廃止される。主な症状と対策を先にまとめる。

なぜ Sass の @import が廃止になったのか

@import が廃止された理由は主に3つある。

1. グローバルスコープ汚染: @import で読み込んだ変数・mixin・function はすべてグローバルに展開される。大規模プロジェクトでは名前衝突が起きやすく、どのファイルが何を定義しているか追いにくい。

2. 多重読み込み: 同じファイルを複数箇所で @import すると、CSSが重複して出力される。

3. ツールによるコード解析の困難さ: グローバルスコープのため、変数がどこで定義されているか静的解析で追えない。

@use と @forward はこれらの問題を解決するために設計された。ファイルごとに namespace が分離され、明示的にどのファイルの何を使うかが分かる。

実際のエラーメッセージ

Vite ビルド実行時に以下のような警告が出る。

Deprecation [import]: Sass @import rules are deprecated and will be removed in Dart Sass 2.0.0.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
 1 │ @import 'variables';
   │ ^^^^^^^^^^^^^^^^^^^^
   ╵
    src/styles/main.scss 1:1  root stylesheet

Dart Sass 2.0 以降では警告ではなくビルドエラーになる。

Error: @import rules are not allowed in this context.

Vite の設定で警告を一時的に抑制する（移行期間の対応）

移行期間中に警告を一時的に抑制したい場合は vite.config.ts に以下を追加する。

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 自分のコードの @import 警告を抑制（Sass 1.80+ で使用可能）
        silenceDeprecations: ['import'],
        // 依存パッケージからの警告を抑制
        quietDeps: true,
      },
    },
  },
})

silenceDeprecations は Sass 1.80+ で追加されたオプション。Vite 5.3+ から preprocessorOptions 経由で渡せるようになった。

ただしこれはあくまで一時対応だ。Dart Sass 2.0 になると silenceDeprecations でも抑制できなくなるため、早めに @use / @forward への移行を進めること。

@import から @use への基本的な移行

変更前（@import）

// src/styles/_variables.scss
$primary-color: #2563eb;
$font-size-base: 16px;
$spacing-unit: 8px;

// src/styles/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == md {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: 1024px) { @content; }
  }
}

// src/styles/main.scss（@import 使用・非推奨）
@import 'variables';
@import 'mixins';

.container {
  color: $primary-color;       // グローバルに使える
  padding: $spacing-unit * 2;
  @include flex-center;
  @include responsive(md) {
    padding: $spacing-unit * 4;
  }
}

変更後（@use）

// src/styles/main.scss（@use 使用・推奨）
@use 'variables';   // ← @import から @use に変更
@use 'mixins';

.container {
  color: variables.$primary-color;       // ← namespace が必要になる
  padding: variables.$spacing-unit * 2;
  @include mixins.flex-center;           // ← namespace が必要になる
  @include mixins.responsive(md) {
    padding: variables.$spacing-unit * 4;
  }
}

@use で読み込んだファイルは、ファイル名（先頭の _ と拡張子を除いたもの）が namespace になる。_variables.scss なら variables、_mixins.scss なら mixins になる。

namespace を短くする・省略する

namespace が長くなる場合は as で短縮できる。

@use 'variables' as v;   // namespace を v に短縮
@use 'mixins' as m;

.container {
  color: v.$primary-color;
  @include m.flex-center;
}

また as * を使うと namespace なしでアクセスできる（グローバルに展開される）。ただし名前衝突のリスクがあるため推奨されない。

// ⚠️ 非推奨（名前衝突のリスクあり）
@use 'variables' as *;

.container {
  color: $primary-color;  // namespace なし
}

@forward を使ったエントリポイントの作成

大規模プロジェクトでは、複数の共通ファイルを _index.scss でまとめて @forward し、各コンポーネントから1行の @use で読み込めるようにすると管理しやすい。

// src/styles/_index.scss（エントリポイント）
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// src/styles/components/_button.scss
@use '../index' as styles;   // _index.scss から一括で読み込む

.button {
  background-color: styles.$primary-color;
  padding: styles.$spacing-unit;
  @include styles.flex-center;
}

@forward を使う際の注意点:

• @forward されたファイルの変数・mixin は、@forward したファイルの namespace でアクセスする
• @forward 'variables' as v-* のようにプレフィックスを付けて名前空間を整理できる
• @forward と @use を同一ファイルで使う場合、@forward を先に書く

// @forward でプレフィックスを付ける例
@forward 'variables' as var-*;

// 使用側
@use 'index';
.box { color: index.$var-primary-color; }

sass-migrator で自動移行する

Sass 公式の自動移行ツール sass-migrator を使うと、@import を @use / @forward に自動変換できる。

# インストール（グローバル）
npm install -g sass-migrator

# 単一ファイルを移行（依存ファイルも一緒に移行する場合は --migrate-deps を付ける）
sass-migrator module --migrate-deps src/styles/main.scss

# ドライラン（変更内容を確認するだけ、ファイルは変更しない）
sass-migrator module --dry-run --migrate-deps src/styles/main.scss

sass-migrator は完璧ではなく、複雑な mixin や動的な変数名には対応できないことがある。自動移行後は必ずビルドが通るか確認すること。

よくある移行ミスと対処法

mixin の引数に他ファイルの変数を渡すケース

@import 時代はグローバルスコープだったため問題なかったが、@use では各ファイルで明示的に @use する必要がある。

// ❌ NG: _button.scss 側で変数が解決できない
@use 'mixins';

.button {
  @include mixins.responsive(md) {
    padding: $spacing-unit * 2;  // $spacing-unit が参照できない
  }
}

// ✅ OK: 必要なファイルを個別に @use する
@use 'variables';
@use 'mixins';

.button {
  @include mixins.responsive(md) {
    padding: variables.$spacing-unit * 2;
  }
}

CSS フレームワーク（Bootstrap など）の @import 警告

Bootstrap や古い CSS フレームワークが内部で @import を使っている場合、quietDeps: true で依存パッケージからの警告を抑制できる。

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true,  // 依存パッケージの警告を抑制
      },
    },
  },
})

まとめ

Vite + Sass で @import の deprecation 警告が出る原因は、Dart Sass 1.80 以降で @import が非推奨になったためだ。

1. 一時対応: vite.config.ts に silenceDeprecations: ['import'] と quietDeps: true を追加して警告を抑制する
2. 恒久対応: @import を @use / @forward に書き換える。変数・mixin は namespace 付き（variables.$color 等）でアクセスする
3. 自動移行: sass-migrator module --migrate-deps を使うと一括変換できる（要手動確認）
4. 大規模プロジェクト: _index.scss に @forward でまとめると、各コンポーネントから @use '../styles' 1行で使えて管理が楽になる

Dart Sass 2.0 では @import が完全に動かなくなるため、早めに移行しておくことを強くすすめる。

技術ブログの記事一覧へ