前回はBootstrapのテンプレートについてご紹介しました。
今回は前回適用したテンプレートでCSSをカスタマイズしてみます。
ただ、CSSをカスタマイズするにはコンパイルが必要なってくるので今回はコンパイルに必要な手順を紹介します。
はじめに、前回ダウンロードしたテンプレートにbuild、distフォルダがあると思います。
この2フォルダが必要になります。
初めて見る人はなんでコンパイルするの？と思う人もいると思います。
それはbuildの中を確認するとわかります。
build
│
├───bootstrap-less
│ │ mixins.less
│ │ variables.less
│ │
│ └───mixins
│ alerts.less
│ background-variant.less
│ …
│
└───less
│ .csslintrc
│ 404_500_errors.less
│ AdminLTE-without-plugins.less
│ AdminLTE.less
│ …
│
└───skins
skin-black-light.less
skin-black.less
skin-blue-light.less
…
.lessというファイルがたくさんあります。
.lessとはいったいどういうものか。私自身もわからなかったので調べてみました。
こちらサイトに記載していました。
参考にした記事にも「CSSに変換しないといけない」と記載がありますね。それがコンパイルする理由になります。
ちなみにdistのほうは想像つくかと思いますがコンパイルしたあとのフォルダになります。
それでは実際にコンパイルの手順について説明していきます。
コンパイルにはnode.jsを使用します。
node.js自体の説明は省略します。
■コンパイル方法
1.cmdを起動し、ダウンロードしたテンプレートまで移動します。
2.yarn をインストール
npm i -g yarn
3.本ディレクトリにて、以下のコマンドを実行
yarn
4.本ディレクトリにて、以下コマンドを実行
grunt watch
5.適当なファイルを編集する
するとコンパイルが実施される
6.distフォルダの中身が反映されます。
この手順で実際にAdminLTE.lessを編集する下記のようなコンパイルが流れます。
意外にも簡単にコンパイルできたのではないでしょうか？
今回はここまでとし、次回は実際にダウンロードしたテンプレートにカスタマイズしたCSSを反映したいと思います。
最後までご覧いただき、ありがとうございました。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。