自分メモです('ω')
本日、ハンズオン的な爆速Webアプリ開発でCodePenを初めて使いました。リアルタイムプレビュー、すごく便利でした。作業後によく見ると、途中でデフォルトブラウザに引っ張られて意図したアカウントでサインアップできていないブラウザ側で成果物を作ってしまっていました。
これを本来のアカウント環境に移行した時に、「おやっ？」となった時の調査経緯です。
事象
CodePenの「HTML」、「CSS」、「js」のコードをすべてコピペしました。結果↓（著作権フリーと信じています('ω')）
うーん、CSS周りが崩れていそうです。
確認
本日のハンズオンから、以下順で確認していきます。
- コードのコピペミスは無いか
- ライブラリは同一のモノを設定できているか ← 怪しんでいる
- その他（今日触れなかった要素）
うーん、コピペし直しても状況は変わらず。HTML内のライブラリ読み込みは関係無いですよね。
続けて、CSSのライブラリ設定が怪しいと踏むも、何も拡張設定はしていなさそうです。↓
JSのライブラリ等も特に設定はありませんでした。。
こうなると目視が頼りです('ω')
二画面を横に並べて、凝視すること一分、、
ここ、何か違う('ω')
何やら、Pen Settingsの「CSS Preprocessor」という設定で、CSSの拡張言語にも対応させられるみたいです。
ここでSCSSを設定してあげることで、無事に意図した表示になりました！
参考記事
まだまだ理解はしていないので、勉強していきます('ω')