refactor(style): 非推奨の Sass @import を @use へ置き換える - #59
Merged
Conversation
Dart Sass 3.0 で @import は削除される。@use は他の規則より前に置く必要が あるため、index.sass にあった全体向けの定義を src/_base.sass へ移し、 index.sass を @use の一覧にした。 こうしないと @use したモジュールの CSS が index.sass 自身の規則より前に 出るため、読み込み順（カスケード）が入れ替わる。_base.sass を最初に @use することで元の順序をそのまま保っている。 paper-css の読み込み（plain CSS の @import）も _base.sass の先頭へ移した。 plain CSS の @import は非推奨ではないが、これも「規則」なので @use より 後ろに置けない。位置は元と同じく最初なので出力順は変わらない。 _base.sass を src/sass ではなく src/ に置いたのは、@font-face の url('./fonts/...') が index.sass と同じ相対位置のままになるようにするため。 npm run build の成果物は移行前と一致（index-oVwo4yYR.css / index-DLcc7pV1.js、 SHA256 も一致）。OCRB のフォント4種も同じサイズで出力されている。 DEPRECATION WARNING も0件になった。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
なぜ
Dart Sass は
@importを非推奨にしており、Dart Sass 3.0 で削除される。#58 の本文で「付随して気づいたこと」として挙げていた件で、org 横断の棚卸しの一部。
どう直したか
@useは「他の規則より前」に置く必要がある。末尾の@importをそのまま@useにすると、モジュールの CSS が先頭に出て読み込み順（カスケード）が入れ替わる。
そこで
index.sassを@useの一覧にし、中身をsrc/_base.sassへ移した。paper-cssの読み込み（plain CSS の@import）も_base.sassの先頭へ移している。plain CSS の
@importは非推奨ではないが、これも「規則」なので@useより後ろに置けない。位置は元と同じく最初なので出力順は変わらない。
_base.sassをsrc/sass/ではなくsrc/に置いたのは、@font-faceのurl('./fonts/...')がindex.sassと同じ相対位置のままになるようにするため。確認したこと
npm run buildの成果物が移行前と一致（index-oVwo4yYR.css/index-DLcc7pV1.js、内容ハッシュ入りのファイル名も SHA256 も同じ）
🤖 Generated with Claude Code