開発

bootstrapから使用しないコンポーネントを削除する方法

作成日： 2018年12月21日

📝 はじめに本記事はBootstrapのCSS容量削減についての一考です。

次にbootstrapからホームページを作成するにあたって使用しないコンポーネントを削除します。

そのためには、bootstrap.scssのimportから不要なコンポーネントをコメントアウトしてコンパイルするだけです。

ひとまず、"code"、"button-group"、"custom-forms"、"jumbotron"、"progress"、"popover"は不要だと思いますので削除します。

SASS

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
//@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
//@import "button-group";
@import "input-group";
//@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
//@import "jumbotron";
@import "alert";
//@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
//@import "popover";
@import "carousel";
@import "utilities";
@import "print";

これで 15kb程度 削除出来ました。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

1,188 円～ 2023年10月1日 1:01 AM時点のAmazon.co.jp 価格 -詳細はこちら-価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。

CSSをより便利に、効率的に書ける「Sass（サス）」の解説書を、最新のコーディング環境にあわせて大幅刷新！Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。

amazonでチェック

本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。