Rails5.1, Asset PipelineでjQueryとをSemantic UI使う方法

環境

macOS Mojave 10.14.1
Rails 5.1.6
ruby 2.5.0

yarn addコマンドjQueryとSemantic UIをインストール

最初にjqueryをインストール

1
$ yarn add jquery

次にSemantic UIをインストール

1
$ yarn add semantic-ui

インストールしたNodeモジュールはnode_modulesディレクトリ配下にインストールされています。

1
2
3
4
5
6
7
8
node_modules/
├─────semantic-ui
      ├─────dist
            ├──semantic.css
            ├──semantic.js
├─────jquery
      ├────dist
           ├──jquery.js

jQueryとSemantic UIの設定をする

1
2
3
4
5
6
7
app/assets/javascript/application.js

//= require jquery/dist/jquery.js
//= require rails-ujs
//= require turbolinks
//= require semantic-ui/dist/semantic.js
//= require_tree .

cssの設定

1
2
3
4
app/assets/stylesheets/application.css
 *= require semantic-ui/dist/semantic.css
 *= require_tree .
 *= require_self

終わり