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をインストール

$ yarn add jquery





次にSemantic UIをインストール

$ yarn add semantic-ui





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

node_modules/
├─────semantic-ui
      ├─────dist
            ├──semantic.css
            ├──semantic.js
├─────jquery
      ├────dist
           ├──jquery.js           





jQueryとSemantic UIの設定をする

app/assets/javascript/application.js:

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





app/assets/stylesheets/application.css:

 *= require semantic-ui/dist/semantic.css
 *= require_tree .
 *= require_self

See Also