Help us understand the problem. What is going on with this article?

UIkitのカスタマイズ

More than 1 year has passed since last update.

概要

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"]
}
dip-net
ディップ株式会社は「バイトル」「はたらこねっと」などの求人情報サービスをはじめ、人工知能専門メディア「AINOW」、スタートアップ専門メディア「スタートアップタイムズ」、アニメなどの舞台を紹介するサイト「聖地巡礼マップ」といった新しい分野のサービスを自社で開発・運営しています。
https://www.dip-net.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away