ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

cssが重複?!scssの@importの挙動に注意しよう

久々に2年前くらいの自分のコードを改修してます。

フロントもバックエンドも両方、目も当てられない箇所が多々あったので、自分に対して「クソが...」と呟いてしまうこともありました。

ただ、逆に成長したんだなあとも感じました。

さて、タイトルの件ですがかなりのやらかしポイントで、scssの@importで変数定義のファイルなどを各ファイルの冒頭で読み込んでいた、というのが結論になります。

common.scssという変数定義や共通コンポーネントをまとめたscssファイルがあったとして、下記のような感じです。

  • _top.scss
@import "common";

// topページのスタイリング
  • _map.scss
@import "common";

// mapページのスタイリング


なぜこんなことをしたのか...自分でも謎ですが...(IDEの自動補完を当てにしたのかな??)

もちろん、このような記述をすると各ファイルに共通ファイルの記述が取り込まれるので、同じcssが重複して記述されることになります。
ファイルサイズがとんでもないことになっちゃってました。

style.cssなどの、ビルド用のファイルにだけ@importを記述して取り込めば問題ありません。順番は共通ファイルを先にするよう気をつけましょう。

  • style.scss
@import "variables";
@import "common";
@import "map";
@import "top";

ただ、style.scssの「@importがめちゃくちゃ多くて見通しが悪い」ということでしたら、パーツごとにscssファイルを切り分けて、各パーツのラッパーのscssに@importを記述してもいいと思います。
例えば、mapのパーツがめちゃくちゃ肥大化した場合。

map/
_map.scss
_map_layout.scss
_map_content.scss
_map_variables.scss

  • map.scss
@import "map_layout";
@import "map_content";
@import "map_variables";

このようにして、style.scssでmap.scssを読み込む的な。

そこまで必要になることないかもですが...