Rails/Bootstrap4/Rails6に導入
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Bootstrap4/Rails6に導入);
*目次 [#id917c07]
#contents
*関連ページ [#c42bb6f9]
*参考情報 [#q6680a4f]
*Bootstrap4を導入(Rails 6編) [#k13ec77d]
Bootstrap4とjQueryとFontawesomeを導入する。
**参考情報 [#kb7551f8]
-[[Rails6にjQueryとBootstrapを導入する手順 – knmts.com:ht...
**yarnでjQueryとBootstrapを実行 [#l1580665]
-yarnで必要なファイルをインストール
yarn add bootstrap jquery popper.js
yarn add @fortawesome/fontawesome-free
**jsをインクルード [#u61005e7]
-app/javascript/packs/application.jsを編集。
#pre{{
import '@fortawesome/fontawesome-free/js/all'
require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap") //Bootstrapを追加
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
}}
**cssをインクルード [#s488eecc]
-app/assets/stylesheets/application.cssを編集。
*= require bootstrap/dist/css/bootstrap.min.css
-先頭にインクルード。
**scssをインクルード [#taf6a04e]
-app/assets/stylesheets/application.scssを編集。requireだ...
@import "bootstrap/scss/bootstrap";
-manifest.jsは以下のままで良いようだ。
#pre{{
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
}}
**すべてのpackでjQueryを使えるように。 [#n42b3b39]
※application.jsで「window.jQuery = window.$ = jQuery」し...
-config/webpack/environment.jsを編集。jQueryのパスは相対...
#pre{{
const { environment } = require('@rails/webpacker')
//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
//ここまで
module.exports = environment
}}
終了行:
&tag(Rails/Bootstrap4/Rails6に導入);
*目次 [#id917c07]
#contents
*関連ページ [#c42bb6f9]
*参考情報 [#q6680a4f]
*Bootstrap4を導入(Rails 6編) [#k13ec77d]
Bootstrap4とjQueryとFontawesomeを導入する。
**参考情報 [#kb7551f8]
-[[Rails6にjQueryとBootstrapを導入する手順 – knmts.com:ht...
**yarnでjQueryとBootstrapを実行 [#l1580665]
-yarnで必要なファイルをインストール
yarn add bootstrap jquery popper.js
yarn add @fortawesome/fontawesome-free
**jsをインクルード [#u61005e7]
-app/javascript/packs/application.jsを編集。
#pre{{
import '@fortawesome/fontawesome-free/js/all'
require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap") //Bootstrapを追加
import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
}}
**cssをインクルード [#s488eecc]
-app/assets/stylesheets/application.cssを編集。
*= require bootstrap/dist/css/bootstrap.min.css
-先頭にインクルード。
**scssをインクルード [#taf6a04e]
-app/assets/stylesheets/application.scssを編集。requireだ...
@import "bootstrap/scss/bootstrap";
-manifest.jsは以下のままで良いようだ。
#pre{{
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js
}}
**すべてのpackでjQueryを使えるように。 [#n42b3b39]
※application.jsで「window.jQuery = window.$ = jQuery」し...
-config/webpack/environment.jsを編集。jQueryのパスは相対...
#pre{{
const { environment } = require('@rails/webpacker')
//ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
//ここまで
module.exports = environment
}}
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
