Rails6ではJavaScriptのモジュールバンドラとしてWebpackが導入されていますが、
画像やCSSに関しては従来のSprocketがアセットパイプラインとして使用され、
JavaScriptのみをWebpackでコンパイルするようになっています。
そのため画像やCSSを反映させる場合は、変更作業が必要になります。
設定手順
application.html.erb
の内容を書き換えます。app/views/layouts/application.html.erb
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
# （下の行を追記）webpackがCSSを扱えるようにする
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
# JavaScriptはデフォルトでwebpacerが pack フォルダをコンパイルして出力している
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
YarnでBootstrapをインストール
$ docker-compose exec app yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free
インストールされたモジュールはpackage.jsonで確認できます。
application.js
以下を追記します。
app/javascript/packs/application.js
require("bootstrap");
require("@fortawesome/fontawesome-free");
environment.js
jQueryをどこからでも呼び出せるようにする。
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
var webpack = require('webpack');
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
CSS
以下追記
app/javascript/stylesheets/application.scss(※新規作成すること)
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import 'bootstrap/scss/bootstrap';
application.js
以下を追記します。
app/javascript/packs/application.js
import '@fortawesome/fontawesome-free/js/all';
import "../stylesheets/application.scss";
最後に、docker-compose restartを実行してブラウザで確認
$ docker-compose restart
無事にCSSが反映されました！
▼参考にさせていただいた記事