この記事の続きです
webpackが吐き出したCSSを読み込めるところをまずは目指します
$ yarn add materialize-css@next $ yarn add css-loader $ yarn add sass-loader $ yarn add node-sass
webpack.config.js のmodule.exportsに以下を追加します
module: { rules: [ { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: true, } }, { loader:'sass-loader', } ], }, ], },
それからentryはapplicationStyleとしておきます。
entry: {
application: './application.js',
+ applicationStyle: './css/application.scss',
},
app/javascript/packs/css/application.scss を作成して中身は以下のようにします
body{ background-color: blue; }
application.html.erbを修正
<!DOCTYPE html> <html> <head> <title>Alder</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> + <%= stylesheet_bundle_tag 'applicationStyle' %> <%= javascript_bundle_tag 'application' %> </head> <body> <%= yield %> </body> </html>
application.scssはちゃんと適用されているようです
materialize-cssをimportするようにapplication.scssを書き換えます
- body{ - background-color: blue; - } @import '~materialize-css/sass/materialize.scss'
いけました
あとはmaterialize-cssのドキュメントを見ながらhtmlを調整するだけでよさそうです
app/views/devise/registrations/new.html.erb を以下のように修正します。
<div class="row section"> <div class="col s12 m6 offset-m3"> <div class="card"> <div class="card-content"> <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class="field"> <%= f.label :display_name %><br /> <%= f.text_field :display_name %> </div> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "new-password" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "new-password" %> </div> <div class="actions"> <%= f.submit "Sign up", class: "waves-effect waves-light btn" %> </div> <% end %> <%= render "devise/shared/links" %> </div> </div> </div> </div>
グリッドについては、row, colあたりはbootstrapと大差なさそうです。
さっとドキュメントを見た感じ、ブロック要素をセンタリングするようなクラスは見当たらなかったので、offsetを使いました。
formはカードにしてみました。
こんな感じです
悪くなさそうなのでこれで統一していきます。
