Posted at

UIkitのカスタマイズ


概要

UIkitはすばらしい

デザインをいい感じにカスタマイズしたい

LESSの変数の値を上書きしたい


環境

MacOS Mojave

npm と yarn はインストール済み

他にも必要になったら適宜インストールしてください


ソースのダウンロード

コンパイル前のソースが必要なのでyarnで落としてくる

終わったらディレクトリを移動しておく

$ yarn add uikit

$ cd node_modules/uikit/

参考: https://getuikit.com/docs/installation#download


LESSファイルを作成する

カスタムテーマというものを作る

ファイル名がそのままテーマになるらしい


custom/my-theme.less


@import "../../src/less/uikit.less";

@navbar-background: #999;
@navbar-nav-item-color: #fff;
@logo-color: #fff;



コンパイル

install で必要なモジュールを落としてくる

compile で追加したテーマを認識させる

watch でファイルが更新されたら自動でコンパイルするように

$ yarn install

$ yarn compile
$ yarn watch


表示の確認

テーマの確認用の環境が用意されているのでそれを利用する

watch でコマンドプロンプトが占領されていると思うので別窓で開いてください

$ npm test

Webブラウザで http://localhost:8080/tests/ にアクセスする

ページ上部に並んでいるコンボボックスとチェックボックスは左から順に以下の役割


  1. 表示するサンプルページ

  2. 使用するテーマ

  3. モード

  4. 横書き/縦書き

先程追加した My-theme がコンボボックスにあるはず

選択するとLESSに記述した内容が反映されたデザインを確認できる

LESSを変更した場合はコンボボックスを切り替えたりすると反映される

ページを再読込しても反映されなかった


コンパイルされたファイル

dist/css/uikit.my-theme.css

dist/css/uikit.my-theme.min.css

上記のように出力されている

好きな場所にコピーして使おう


詰まったところ

ファイルを更新しても watch が反応してくれない

よくわからないけど .gitignore と競合して反応しなくなっていたっぽい

参考: https://github.com/uikit/uikit/issues/3424

ディレクトリ直下に nodemon.json を追加することで反応するようになった


nodemon.json

{

"ignoreRoot": [".git"]
}