Ruby on RailsにMaterizalizeデザインを導入する方法を紹介します。
RailsにMaterizalizeデザインを導入する方法
MaterizalizeのGemを追加します。Gemfileに以下を追記。
1 | gem 'materialize-sass', '~> 1.0.0' |
bundle installを実行します。
1 | $ bundle install |
次にデザインを反映させます。
デフォルトのapplication.cssファイルの場合は、application.scssに変更する必要があります。
2行目でアイコンを読み込ませています。以下のようにGemでも対応できます。
1 | gem 'material_icons' |
・app/assets/stylesheets/application.scss
1 2 3 | @import "materialize"; @import "https://fonts.googleapis.com/icon?family=Material+Icons"; |
次にJSを適用させます。
application.jsに下記を追記します。
・app/assets/javascripts/application.js
1 | //= require materialize |
サーバ再起動してRailsにMaterizalizeデザイン反映完了です。
1 | $ rails s |
RailsにMaterizalizeが反映されているか確認
ちゃんと反映されているかルーティング・コントローラ・Viewを作成して確認してみます。
1 | $ rails generate controller samples --no-helper --no-assets |
・config/routes.rb
1 | root 'samplese#index' |
・app/controllers/samples_controller.rb
1 2 3 4 | class SmaplesController < ApplicationController def index end end |
ViewにMaterizalize公式のサンプルを記述し、確認します。
・app/views/samples/index.html.erb
1 2 3 4 5 6 7 8 9 | <nav> <div class="nav-wrapper"> <div class="col s12"> <a href="#!" class="breadcrumb">First</a> <a href="#!" class="breadcrumb">Second</a> <a href="#!" class="breadcrumb">Third</a> </div> </div> </nav> |
ちゃんとRailsにMaterializeが反映されていることを確認できました。
下記参考：
GitHub - mkhairi/materialize-sass: Materializecss rubygem for Rails Asset Pipeline / Sprockets
Materializecss rubygem for Rails Asset P…
github.com