概要
UIkitはすばらしい
デザインをいい感じにカスタマイズしたい
LESSの変数の値を上書きしたい
環境
MacOS Mojave
npm と yarn はインストール済み
他にも必要になったら適宜インストールしてください
ソースのダウンロード
コンパイル前のソースが必要なのでyarnで落としてくる
終わったらディレクトリを移動しておく
$ yarn add uikit
$ cd node_modules/uikit/
参考: https://getuikit.com/docs/installation#download
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/ にアクセスする
ページ上部に並んでいるコンボボックスとチェックボックスは左から順に以下の役割
- 表示するサンプルページ
- 使用するテーマ
- モード
- 横書き/縦書き
先程追加した 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 を追加することで反応するようになった
{
"ignoreRoot": [".git"]
}