納品前の画面で、FVのカードの見た目が崩れていました。
Claude Codeに相談したところ、CSSの書き方ではなく、SCSSがコンパイルできていないことが分かりました。この記事では、その原因と見つけ方をまとめます。
SCSSのコンパイルが止まってFVの見た目が崩れた
LPの納品前に、FVで使うブレークポイントの名前を新しいものへ置き換える作業を、Claude Codeに任せていました。作業の後に画面を確認すると、カードの見た目が崩れていました。
コンパイルが止まるとstyle.cssが更新されない
SCSSは、そのままではブラウザで使えません。コンパイルによって、css/style.cssというCSSのファイルに変換します。
コンパイルが途中で止まると、style.cssは更新されず、古いままになります。ブラウザは古いstyle.cssを読み込むため、SCSSを直しても画面は変わりません。したがって、見た目が崩れたときは、CSSの値を確認する前に、コンパイルが通っているかを確認する必要があります。
コンパイルエラーの原因は閉じ括弧の漏れと未定義の名前
閉じ括弧の漏れ
FVのカードタイトルのブロックで、}が1つ足りないことに気づきました。手元で同じ状態を再現すると、次のエラーが表示されました。
Error: expected end of rule.エラーが示すのは、}が足りない場所ではなく、ファイルの最後の行です。ファイルを最後まで読んでも、ブロックが閉じていないことが分かった時点で、エラーになるためです。足りない場所は、直前に編集したブロックから上へ戻り、{と}の数を数えて探さないといけません。
定義のないブレークポイント名
置き換えの途中で、Claude Codeが書いたコードにmq("fv-tb")が含まれていました。
mq()は、メディアクエリを書くためのmixinです。mixinは、よく使う記述をまとめて、名前で呼び出せるようにするSassの機能です。このLPでは、ブレークポイントの名前と画面幅の条件を$bpに定義し、mq()が、渡された名前に対応する条件を取り出して、メディアクエリを作ります。
$bp: (
"sp": "screen and (max-width: 768px)",
"tb": "screen and (max-width: 1024px)",
);
@mixin mq($breakpoint: sp) {
@media #{map-get($bp, $breakpoint)} {
@content;
}
}$bpでは、fv-tbが定義されておらず、tbのみが定義されている状態でした。
定義のない名前を渡したため、次のエラーが表示されました。
Error: Expected identifier.エラーが示す行は、書き間違えた場所ではなく、mixinの中の行でした。書き間違えた場所は、エラーの下に表示される呼び出し元の行から分かります。その行に書かれた名前が$bpにないことを確認し、原因を特定しました。
閉じ括弧の漏れを見つけるSassとStylelintの違い
閉じ括弧の漏れは、使うツールによって、エラーの示す位置が違います。ここでは、SassとStylelintを比べます。
Stylelintは、CSSやSCSSの書き方の誤りを検査するツールです。コンパイルとは別に、検査したいファイルを指定して実行します。手元で試した設定は、次のとおりです。SCSSを読み込むための指定を、設定ファイルに書いています。
{
"customSyntax": "postcss-scss",
"rules": {}
}stylelint brace.scss検査したのは、次の6行のSCSSです。2つ目のブロックを書き始める前に、1つ目の}が抜けています。
.card-title {
font-size: 2rem;
.card-list {
color: red;
}エラーの位置は、「行:列」で表示されます。たとえば、6:2は、6行目の2文字目を指します。
Sass（Ver：1.105.1）では、次のエラーが出ました。
Error: expected end of rule.
brace.scss 6:2Stylelint（Ver：16.26.1）では、次のエラーが出ました。
1:1 ✖ Unclosed block CssSyntaxErrorSassは、ファイルの最後の行の終わり（6行目の2文字目）を示します。ファイルを最後まで読んでから、ブロックが閉じていないと気づくためです。Stylelintは、閉じていないブロックの書き始め（1行目の1文字目）を示します。
足りない場所を探すときは、Stylelintの示す位置から読み始めると、手がかりになります。
コンパイルエラーを直した後も崩れは残った
}を足し、fv-tbを定義済みのtbに直して、無事コンパイルが通りました。style.cssが更新されて、修正したCSSが画面に反映されるようになりました。
しかし、見た目は直りませんでした。コンパイルが通っていても、効いていない指定が別に残っていたためです。これは次の記事に書いています。
また、コンパイルが通っても値が無効になる別の書き間違いとして、max()の中の0に単位がないケースをCSSのmax()内の単位なしが原因でwidthが無効になったに書いています。
結論
今回の原因は、見た目のCSSではなく、その前段のコンパイルでした。コンパイルエラーが出たときは、まず}の不足を疑うようにしています。エラーがExpected identifier.の場合は、mixinに渡した名前が$bpに定義されているかを見るように気を付けています。
結局、単純なことが原因だったりします。原点に振り返ってみるのが大事だと思った経験です。