なぜ今まで動いていたコードが急にエラーになったのか（2025年10月現在）
時系列
| 時期 | 状況 | 影響 |
|---|---|---|
| 2019年10月 | Sass（Dart Sass）が@use機能を追加 | まだ誰も使ってない |
| 2020年10月 | @importが非推奨（deprecated）に | 警告が出るだけで動作は問題なし |
| 2022年10月 | LibSassのサポート終了 | Dart Sassへの移行が始まる |
| 2024年後半 | ビルドツールがデフォルトで厳格モードに | エラーが出始める |
| 2025年10月（現在） | ほぼ全ての環境でコンパイルエラーor警告 | 対応が必須に |
急にエラーが出た原因
npm update # または npm install
↓
npm run dev
# → 突然エラー！
何が起きたか：
- Sassのバージョンが自動で上がった（1.69→1.77など）
- ビルドツールの設定が厳格になった（Vite 5、Next.js 14、webpack 5）
- node_modulesを削除して再インストールした
Sass公式の方針：
"Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely."出典：Sass公式ドキュメント
※将来的に@importは完全削除される（時期は未定）
実際に発生するエラー
エラー1：CSSクラスが消えた
// _helpers.scss
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
// main.scss（間違った修正）
@use 'helpers'; // ❌ CSSクラスが出力されない！
症状： HTMLでclass="text-center"が効かない
エラー2：SASS変数が見つからない
// _variables.scss
$primary: #007bff;
// main.scss
@use 'variables';
.button {
background: $primary; // ❌ Error: Undefined variable
}
エラー3：@useの順番エラー
@import 'reset';
@use 'variables'; // ❌ Error: @use rules must be written before
原因：@importと@useの根本的な違い
@import（旧方式）
ファイルの中身を全部そのまま展開する
// _styles.scss
.button { padding: 10px; } // CSSクラス
$primary: blue; // SASS変数
:root { --accent: red; } // CSS変数
// main.scss
@import 'styles';
// ↓ コンパイル後のCSS
.button { padding: 10px; } // 出力される
:root { --accent: red; } // 出力される
// $primaryも使える
@use（新方式）
SASS変数・ミックスイン・関数だけを名前空間付きで読み込む
// main.scss
@use 'styles';
// ↓ コンパイル後のCSS
// CSSクラスもCSS変数も出力されない！
// $primaryはstyles.$primaryとして使用可能
解決策：使い分けルール
基本ルール
| ファイルの中身 | 使うべき構文 | 理由 |
|---|---|---|
CSSクラス定義.class-name { }
|
@import | @useだとCSSが出力されない |
CSS変数:root { --color: blue; }
|
@import | CSSルールなので出力が必要 |
SASS変数のみ$variable: value;
|
@use | 名前空間で管理 |
ミックスインのみ@mixin name() { }
|
@use | 名前空間で管理 |
関数のみ@function name() { }
|
@use | 名前空間で管理 |
正しい使い分け例
// main.scss
// SASS機能は@use（必ず最初に書く）
@use 'config/variables' as v;
@use 'config/mixins' as m;
// CSSルールは@import
@import 'base/reset'; // リセットCSS
@import 'base/css-vars'; // CSS変数
@import 'components/buttons'; // .btnクラス
@import 'layouts/grid'; // .containerクラス
// 使用例
.custom-button {
background: v.$primary; // SASS変数は名前空間付き
@include m.button-style();
}
SASS変数の参照方法
@useにした場合の3つの書き方
1. デフォルト（ファイル名が名前空間）
@use 'variables';
// variables.$primary で使う
2. 短縮名
@use 'variables' as v;
// v.$primary で使う
3. 名前空間を外す（移行に便利）
@use 'variables' as *;
// $primary で使う（今まで通り）
注意： 複数ファイルでas *を使うと変数名衝突でエラー
実践的な移行方法
最小限の移行（すぐ動かしたい場合）
// SASS変数だけ@useに変更（as *で互換性維持）
@use 'config/variables' as *;
// 残りは全部@importのまま
@import 'everything-else';
段階的な移行
Step 1：ファイルを分離
// _sass-variables.scss（SASS変数のみ）
$primary: blue;
$spacing: 1rem;
// _classes.scss（CSSクラス）
@use 'sass-variables' as v;
.mt-1 { margin-top: v.$spacing; }
Step 2：main.scssで使い分け
@use 'sass-variables' as v;
@import 'classes';
ファイル構成の例
styles/
├── config/
│ ├── _variables.scss // SASS変数 → @use
│ ├── _mixins.scss // ミックスイン → @use
│ └── _functions.scss // 関数 → @use
├── base/
│ ├── _reset.scss // リセットCSS → @import
│ └── _css-vars.scss // CSS変数 → @import
└── components/
└── _buttons.scss // CSSクラス → @import
Tips
警告を消したい場合
Vite
// vite.config.js
export default {
css: {
preprocessorOptions: {
scss: {
silenceDeprecations: ['import'],
}
}
}
}
webpack
// webpack.config.js
{
loader: 'sass-loader',
options: {
sassOptions: {
silenceDeprecations: ['import'],
}
}
}
よくある間違いと対処法
| 間違い | 症状 | 対処法 |
|---|---|---|
| CSSクラスを@useにした | スタイルが消えた | @importに戻す |
| SASS変数の参照を変えてない | Undefined variable |
ファイル名.$変数にする |
| @useを@importの後に書いた | @use rules must be written before | @useを最初に移動 |
まとめ
覚えておくべき5つのポイント
- CSSクラスを含むファイルは@import - @useにするとクラスが消える
- SASS変数・ミックスイン・関数のみ@use - 名前空間で管理される
- @useは必ず最初に書く - @importより前に
- *「as 」で移行を楽に - 既存コードの修正が最小限
- 段階的に対応でOK - 全部一度に変える必要なし
状況別の対応
- 新規プロジェクト → 最初から適切に使い分け
- 既存プロジェクト（小規模） → 警告を無視or設定で消す
- 既存プロジェクト（大規模） → SASS変数だけ段階的に@useへ
-
緊急対応 → 変数だけ
@use ... as *にして残りは@import
最重要：CSSクラスを含むファイルは絶対に@importのまま！