【CSS】複数読み込んでいたCSSを1つにまとめる

Yukimi Sato 25views 更新:2016年10月13日

PageSpeedさんに「読み込むリソース多いよ!」と怒られた?ので、CSSを雑に1つにまとめてみました。

纏めたCSS

  1. bootstrap.min.css
  2. bootstrap-responsive.min.css
  3. odometer-theme-default.css
  4. jquery-ui.min.css
  5. animate.css
  6. style.css

方法

それぞれの「_」を頭に付けた形でSCSSを作成(するとモジュール扱いになってcss出力されなくなるよ)。
今後メンテし易いように、中身は雑にコピペ。
作ったSCSSをインポートして出力。
今回は「style.scss」の頭でインポートするようにしました。

インポートはこんな感じ。

@import "bootstrap.min"; //_bootstrap.min.scss
@import "bootstrap-responsive.min"; //_bootstrap-responsive.min.scss
@import "odometer/odometer-theme-default"; //odometer/_odometer-theme-default.scss
@import "jquery-ui.min"; //_jquery-ui.min.scss
@import "animate"; //_animate.scss

結果

怒られる行数は減ったけど、ポイントは1ポイントも上がりませんでした()

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません