bokunonikki.net

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

Sun Nov 25, 2018
Wed Jun 9, 2021

環境

  • 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

終わり

See Also