発生している問題

https://qiita.com/rhistoba/items/f724dae231d7e28bf477
https://www.youtube.com/watch?v=Q-PY5QQj80E

bootstrapを導入し、その上でCSSやJavascriptを正常に反映させたいと思っています。

上記の記事を参考にしてRubyonRailsにBootstrap4.5を導入したのですが、背景を黒にするなどのCSSが反映されません。
ボタンにカーソルを重ねた時の挙動などhtmlのclassに記述する分には反映されているようなのですが、ファイルの配置などが間違っているのでしょうか。
私のbootstrapに対する理解不足や考え違いも大いにあると思いますが、
些細なことでも何か気づいたことがあればお教えいただけると幸いです。

導入するにあたり行ったコマンド

yarn add bootstrap@4.5.2 jquery popper.js
yarn add @fortawesome/fontawesome-free

mkdir app/javascript/src
touch app/javascript/src/application.scss

該当のソースコード

インポート設定
app/javascript/packs/application.js　

js
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6require("@rails/ujs").start()
7require("turbolinks").start()
8require("@rails/activestorage").start()
9require("channels")
10require('jquery')
11
12import 'bootstrap'
13import '../src/application.scss'
14import '@fortawesome/fontawesome-free/js/all'
15// Uncomment to copy all static images under ../images to the output folder and reference
16// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
17// or the `imagePath` JavaScript helper below.
18//
19// const images = require.context('../images', true)
20// const imagePath = (name) => images(name, true)
21

インポート設定２
app/javascript/src/apllication.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

アプリケーションがWebpackerでビルドしたJS/CSSを読み込むよう設定
app/views/layouts/application.html.erb

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Takunowa29232</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <%= render "shared/header" %>
      <%= yield %>
    </div>
  </body>
</html>

app/views/shared/_header.html.erbの中身

html
1<header class="masthead mb-auto">
2  <div class="inner d-flex justify-content-between">
3    <div class="masthead-brand">
4      <%= link_to '卓の輪', root_path %>
5      <%= flash[:notice] %>
6    </div>
7    <nav class="nav nav-masthead justify-content-end">
8        <% if logged_in? %>
9          <%= link_to '日程記入', "#", class: "btn btn-outline-primary nav-link", role: "button" %>
10          <%= link_to 'マッチング', "#", class: "btn btn-outline-primary nav-link", role: "button" %>
11          <%= link_to 'マイページ', "#", class: "btn btn-outline-primary nav-link", role: "button"  %>
12          <%= link_to 'ログアウト', logout_path, class: "btn btn-outline-primary nav-link", role: "button"  %>
13        <% else %>
14          <%= link_to 'ログイン', "/auth/twitter", class: "btn btn-outline-primary nav-link", role: "button"  %>
15        <% end %>
16    </nav>
17  </div>
18</header>

app/assets/stylesheets/shared/header.scss

scss
1/*
2 * Globals
3 */
4
5/* Links */
6a,
7a:focus,
8a:hover {
9  color: #fff;
10}
11
12/* Custom default button */
13.btn-secondary,
14.btn-secondary:hover,
15.btn-secondary:focus {
16  color: #333;
17  text-shadow: none; /* Prevent inheritance from `body` */
18  background-color: #fff;
19  border: .05rem solid #fff;
20}
21
22
23/*
24 * Base structure
25 */
26
27html,
28body {
29  height: 100%;
30  background-color: #333;
31}
32
33body {
34  display: -ms-flexbox;
35  display: flex;
36  color: #fff;
37  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39}
40
41.cover-container {
42  max-width: 42em;
43}
44
45
46/*
47 * Header
48 */
49.masthead {
50  margin-bottom: 2rem;
51}
52
53.masthead-brand {
54  margin-bottom: 0;
55}
56
57.nav-masthead .nav-link {
58  padding: .25rem 0;
59  font-weight: 700;
60  color: rgba(255, 255, 255, .5);
61  background-color: transparent;
62  border-bottom: .25rem solid transparent;
63}
64
65.nav-masthead .nav-link:hover,
66.nav-masthead .nav-link:focus {
67  border-bottom-color: rgba(255, 255, 255, .25);
68}
69
70.nav-masthead .nav-link + .nav-link {
71  margin-left: 1rem;
72}
73
74.nav-masthead .active {
75  color: #fff;
76  border-bottom-color: #fff;
77}
78
79@media (min-width: 48em) {
80  .masthead-brand {
81    float: left;
82  }
83  .nav-masthead {
84    float: right;
85  }
86}
87
88
89/*
90 * Cover
91 */
92.cover {
93  padding: 0 1.5rem;
94}
95.cover .btn-lg {
96  padding: .75rem 1.25rem;
97  font-weight: 700;
98}

app/views/events/index.html.erb

html
1<main role="main" class="inner cover">
2    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
3      <% if logged_in? %>
4      <p class="cover-heading"><%= "ようこそ#{@current_user.name}さん!" %></p>
5        <p>カレンダーが表示される予定。</p>
6      <% else %>
7        <h1 class="cover-heading">卓の輪へようこそ！</h1>
8        <p calss="lead">卓の輪はセッション参加可能なスケジュールを共有してマッチングさせるツールです。</p>
9        <p calss="lead">ログインしてスケジュールだけ入れておけば日程の合う人が可視化されます。</p>
10        <p calss="lead">卓で遊びたいと思った時には、卓の輪で気軽に誘ってみましょう。</p>
11        <%= link_to 'ログイン', "/auth/twitter", class: "btn btn-lg btn-secondary", role: "button"  %>
12      <% end %>
13    </div>
14</main>

app/assets/stylesheets/events/events.scss

scss
1/*
2 * Globals
3 */
4
5/* Links */
6a,
7a:focus,
8a:hover {
9  color: #fff;
10}
11
12/* Custom default button */
13.btn-secondary,
14.btn-secondary:hover,
15.btn-secondary:focus {
16  color: #333;
17  text-shadow: none; /* Prevent inheritance from `body` */
18  background-color: #fff;
19  border: .05rem solid #fff;
20}
21
22
23/*
24 * Base structure
25 */
26
27html,
28body {
29  height: 100%;
30  background-color: #333;
31}
32
33body {
34  display: -ms-flexbox;
35  display: flex;
36  color: #fff;
37  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39}
40
41.cover-container {
42  max-width: 42em;
43}
44
45
46/*
47 * Header
48 */
49.masthead {
50  margin-bottom: 2rem;
51}
52
53.masthead-brand {
54  margin-bottom: 0;
55}
56
57.nav-masthead .nav-link {
58  padding: .25rem 0;
59  font-weight: 700;
60  color: rgba(255, 255, 255, .5);
61  background-color: transparent;
62  border-bottom: .25rem solid transparent;
63}
64
65.nav-masthead .nav-link:hover,
66.nav-masthead .nav-link:focus {
67  border-bottom-color: rgba(255, 255, 255, .25);
68}
69
70.nav-masthead .nav-link + .nav-link {
71  margin-left: 1rem;
72}
73
74.nav-masthead .active {
75  color: #fff;
76  border-bottom-color: #fff;
77}
78
79@media (min-width: 48em) {
80  .masthead-brand {
81    float: left;
82  }
83  .nav-masthead {
84    float: right;
85  }
86}
87
88
89/*
90 * Cover
91 */
92.cover {
93  padding: 0 1.5rem;
94}
95.cover .btn-lg {
96  padding: .75rem 1.25rem;
97  font-weight: 700;
98}

#ファイルの配置画像や実際のviewの挙動
stylesheetの配置画像
 javascriptの配置画像
 viewファイルの配置画像
 開発環境での挙動

参考にした公式の例
https://getbootstrap.com/docs/4.5/examples/cover/

試したこと

参考にした記事より
それと、app以下にjavascriptディレクトリが生成されますが、
基本的にここにWebpackerでビルドするJS/CSSを配置するようにします。
今はまだCSSを配置するためのディレクトリがないので、app/javascript以下にsrcというディレクトリを作成します。

との記述があったため、scssファイルをapp/assets/stylesheetsディレクトリではなく
app/javascript/srcにsharedディレクトリを作成し、上記と同様のファイルを配置して見たりもしたのですが、変わりありませんでした。

実際の配置

補足情報（FW/ツールのバージョンなど）

環境
・ Rails 6.0.0
・ Ruby 2.6.5
・Webpacker: 3.5.5
・Bootstrap: 4.5.2
・jquery 3.5.1
・popper.js 1.16.1
・Font-Awesome(Free): 5.7.2

package.json
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "4.3.0",
"bootstrap": "4.5.2",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.0"
}

行動規範の内容に同意します

回答1件

ベストアンサー

  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

にはwebpackがコンパイルしたCSSが出力されます

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

にはapp/assets/配下をsprocketがコンパイルした内容が出力されます

stylesheet_pack_tag...で記述しているのに
app/assets/配下のcssを記述していることが問題では無いでしょうか

以下参考になれば
DockerでRailsチュートリアルのローカル開発環境構築 - WebpackでBootstrapとFont Awesomeを導入 - - Qiita

追記 - コメントへの回答

ちょっと自信が無いのですが
@import “shared/*”;
で指定しているのは相対パスですので
app/javascript/src/shared/*
を参照することになりませんかね？（apllication.scssからみた相対パスだとすると）

ちなみに私が参考にした記事では
javascript/packs/application.js
にCSSのimportも記述する内容でしたがその際はapplication.jsから見た相対パスで記述しています

上記記事ではこの方法でapplication.cssをimportしておりますので参考になれば

投稿2020/09/06 14:48

編集2020/09/07 04:38

naokit-dev

総合スコア424

guguasmon

2020/09/07 02:12

回答と参考になる記事をありがとうございます。ひとまず下記のようにstylesheet_link_tag〜も追記することで対応できました。 `app/views/layouts/application.html.erb` ```html <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> ``` ちなみにですが私が試した方法（app/javascript/srcにsharedディレクトリを作成しファイルを配置する）で動作しなかったのはなぜか教えていただくことは可能でしょうか。 `app/javascript/src/apllication.scss`に ``` @import '~bootstrap/scss/bootstrap'; @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import “shared/*”; ``` とも書き加えてみたのですがうまくいきませんでした。

guguasmon

2020/09/07 05:17

回答ありがとうございました！

行動規範の内容に同意します