Rails/Bootstrap4/Rails6.1に導入
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Bootstrap4/Rails6.1に導入);
*目次 [#fcb9c0e6]
#contents
*関連ページ [#v1cb4e00]
*参考情報 [#uafbc7a7]
-[[Adding Bootstrap 4 to a Rails 6 project:https://www.li...
*基本方針 [#q9088bfb]
-Rails 6.1でも引き続きwebpackerでJavaScriptを管理しなけれ...
-webpackerでJavaScriptだけでなくscssファイルを管理するこ...
-以下の方法はJavaScriptをwebpackerでscssを従来の方法(spro...
-ただしfontawesomeはapplication.jsで読み込む。
*Bootstrap4を導入(Rails 6.1編) [#k13ec77d]
Bootstrap4とjQueryとFontawesomeを導入する。
**yarnでjQueryとBootstrapとfontawesomeを導入 [#sef1ae5d]
-MacPortsの場合nodejs14だとエラーが発生したのでnodejs16を...
-以下のコマンドを実行
bundle exec rails webpacker:install #最初の1回のみ必要
yarn add bootstrap@4 jquery popper.js
yarn add @fortawesome/fontawesome-free
**jsをインクルード [#f48f2476]
-app/javascript/packs/application.jsを編集。
#pre{{
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
//追加ここから
import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
//追加ここまで
Rails.start()
Turbolinks.start()
ActiveStorage.start()
}}
**scssをインクルード [#i5f15f28]
-app/assets/stylesheets/application.scssを新規作成。appli...
@import 'bootstrap/scss/bootstrap';
**Bootstrapとfontawesomeの使用 [#ofbd88c8]
-application.html.erbの変更
#pre{{
<div class="container">
<%= yield %>
</div>
}}
-index.html.erb
#pre{{
<h1><i class='fa fa-home'></i>Books</h1>
<table class="table">
(以下省略)
}}
終了行:
&tag(Rails/Bootstrap4/Rails6.1に導入);
*目次 [#fcb9c0e6]
#contents
*関連ページ [#v1cb4e00]
*参考情報 [#uafbc7a7]
-[[Adding Bootstrap 4 to a Rails 6 project:https://www.li...
*基本方針 [#q9088bfb]
-Rails 6.1でも引き続きwebpackerでJavaScriptを管理しなけれ...
-webpackerでJavaScriptだけでなくscssファイルを管理するこ...
-以下の方法はJavaScriptをwebpackerでscssを従来の方法(spro...
-ただしfontawesomeはapplication.jsで読み込む。
*Bootstrap4を導入(Rails 6.1編) [#k13ec77d]
Bootstrap4とjQueryとFontawesomeを導入する。
**yarnでjQueryとBootstrapとfontawesomeを導入 [#sef1ae5d]
-MacPortsの場合nodejs14だとエラーが発生したのでnodejs16を...
-以下のコマンドを実行
bundle exec rails webpacker:install #最初の1回のみ必要
yarn add bootstrap@4 jquery popper.js
yarn add @fortawesome/fontawesome-free
**jsをインクルード [#f48f2476]
-app/javascript/packs/application.jsを編集。
#pre{{
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
//追加ここから
import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
//追加ここまで
Rails.start()
Turbolinks.start()
ActiveStorage.start()
}}
**scssをインクルード [#i5f15f28]
-app/assets/stylesheets/application.scssを新規作成。appli...
@import 'bootstrap/scss/bootstrap';
**Bootstrapとfontawesomeの使用 [#ofbd88c8]
-application.html.erbの変更
#pre{{
<div class="container">
<%= yield %>
</div>
}}
-index.html.erb
#pre{{
<h1><i class='fa fa-home'></i>Books</h1>
<table class="table">
(以下省略)
}}
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
