Rails6でのSemantic UIの導入
BootstrapのフレームワークであるSemantic UIをRails6で使ってみたので、以下に導入方法を記しておきます。
以下の記事もよければ参考にしてください。
【Rails】Semantic UIを使って動的にフラッシュメッセージを表示する方法 - Qiita
前提
Webpackerでの導入方法が分からなかったので、従来のassetsフォルダでの導入にしました。。。
Webpackerでの導入方法が分かり次第、更新したいと思います。
追記
公式のisuueを追ったところ、semantic-ui-sassはwebpackerで導入する方法が見当たらなかった。
How to add semantic-ui-sass on Rails 6 · Issue #144 · doabit/semantic-ui-sass · GitHub
導入方法
- Gemをインストールする。
(Gemfile) gem 'semantic-ui-sass'
- マニフェストファイルの編集。
(app/assets/stylesheets/application.scss) @import "semantic-ui";
(app/assets/javascript/application.js) // Loads all Semantic javascripts // = require semantic-ui
500エラーが表示されるので、エラーメッセージを確認。
ActionView::Template::Error - Asset `application.js` was not declared to be precompiled in production. Declare links to your assets in `app/assets/config/manifest.js`. //= link application.js and restart your server: app/views/layouts/application.html.slim:11:in `view template'
app/assets/config/manifest.jsに//= link application.jsを追記。
(app/assets/config/manifest.js) //= link_tree ../images //= link_directory ../stylesheets .css //= link application.js
これだけでSemantic UIの記述を反映できる。
