質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

7591閲覧

Rails6にBootstrap4.5を導入したが、CSSが反映されない

guguasmon

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1グッド

1クリップ

投稿2020/09/06 01:31

編集2020/09/06 02:36

発生している問題

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

インポート設定2
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"
}

naokit-dev👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<%= 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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問