まえちゃんろぐ

日々の生活の中での気付き、学んだこと、体験したことをアウトプットするブログ(雑記多めです)| プログラミング 本 ワークアウト 茶道

Yarn を使って AdminLTE を Ruby on Rails5 へインストールする方法

time 2018/06/27

Yarn を使って AdminLTE を Ruby on Rails5 へインストールする方法

オシャレで便利なテンプレートエンジン「AdminLTE」をYarnを使ってインストールする方法を書きます。

こんな感じのいい感じのテンプレート。

sponsored link

開発環境

  • Ruby: 2.4.1p111
  • Rails: 5.1.2
  • AdminLTE: 2.4.0
  • Yarn: 1.2.1

実装

今回インストールするAdminLTEのバージョンは「2.4.0」になります。

AdminLTEの現在の最新版は3.x系(開発進行版)ですが、2.x系まであったスキン(テンプレートの色を管理しているスタイルシート)を管理しているskins/ディレクトリがなくなっており、以前までの使い方が出来なくなっていたためです。2.x系の使い方の方が馴染みはあるで今回はこちらのバージョンで。

また、Yarnは使用できることを想定して進みます。

Yarnの入れ方は以下を参考にしてください。

プロジェクトの作成

まずは土台となるプロジェクトを作成します。

ここはサクッと。

Yarn から AdminLTE をインストールする

次はYarnからAdminLTEをインストールします。

Yarnが管理しているパッケージはyarn addで入れることができます。

AdminLTEに関連したパッケージがnode_modules/ディレクトリにごっそり入ります。

node_modules/の他に、package.jsonyarn.lockもそれぞれ追加されます。

package.json の中身

yarn.lock の中身

assets の設定

AdminLTEのスクリプトとスタイルシートが読み込めるように「assets」の設定を行います。

assetsのパスに新たにnode_modules/ディレクトリを追加します。

JavaScript の設定

AdminLTEのスクリプトの読み込み。

CSSの設定

AdminLTEのスタイルシートの読み込み。

おわり

これでAdminLTEを使う準備が整いました。あとはドキュメントに従ってコーディングしていくだけです。

参考記事

販売中チケット

プログラミング、Webサービスの作り方教えます

自分のスキルを販売しております。お困りの方はご遠慮なくご連絡頂ければと思います。

コメント

down

コメントする




スポンサードリンク

書いてる人

maechan

maechan

ベンチャー企業、フリーランス、スタートアップを経験。開発業務、人事業務に従事していました。現在は農業系スタートアップ企業でエンジニアとして働いています。リモートワークをしているノマドサラリーマンです。詳しいプロフィールはこちら。 [詳細]

販売中チケット

プログラミング、Webサービスの作り方教えます 一人で悩まず!お気軽にご相談ください!

その他のチケットはこちら

Instagram