railsにてBootstrap4でCSSの上書きが出来ません

作成したnavbarにfixed-topを施したところ、body要素と被ってしまうので別のcssファイルでpaddingの指定したいのですが、読み込んでくれません。
同ディレクトリ内のbootstrap.min.cssを直接指定する方法では、bootstrap自体が読み込まれませんでした。

該当のソースコード

applicatn
1<!DOCTYPE html>
2<html lag="ja">
3  <head>
4    <meta charset='utf-8'>
5    <meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1'>
6    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9　　 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
10     <link rel="stylesheet" href="stylesheets/style.css">
11    <title>a</title>
12  </head>
13  <body>
14    <div class="justify-content-center">
15      <%= render partial: 'common/header' %>
16        <div class="row" style="background:#b0c4de">
17            <button type="button" class="btn btn-primary">Hello, world!</button>
18          
19            <div class="col-3">あああ</div>
20          
21            <p class="alert"><%= alert %></p>
22            <%= yield %>
23        </div>
24    </div>
25    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
26    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
27    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

試したこと

CSSを下記のように指定するとエラーが出ます
<%= stylesheet_link_tag "application", media: "all" %>

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

gem 'bootstrap', '> 4.3.1'
gem 'jquery-rails'
gem 'bootstrap-sass'
gem 'sass-rails', '> 5.0.7'

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

回答2件

自己解決

application.scss内の
@import "bootstrap-sprockets";
@import "bootstrap";

を削除するとエラーが解消され、cssも上書き出来るようになった。
理由は不明です。。。

投稿2019/04/08 05:09

nashi

総合スコア33

CSSファイルはどこにおいてますか
通常 Rails は javascript や css は app/assets 以下においてプリコンパイルされるものなので
特別な設定をしないと stylesheets/style.css とかくだけでは読み込まれないと思います

デフォルトでは
app/assets/stylesheets/application.css
にCSSをかいて
<%= stylesheet_link_tag "application", media: "all" %>
で読み込むのが普通かと思います

実際に読み込まれるファイルは public 以下にプリコンパイルされた数字付きのファイルになる

参考: https://railsguides.jp/asset_pipeline.html

投稿2019/04/07 09:32

mypt

総合スコア170

nashi

2019/04/07 09:49

回答ありがとございます。追記に載せたように編集すると、エラーが出てしまいます。ただ、Chromeの検証からcssを編集すると上手くいきます。

nashi

2019/04/07 09:51

cssはassset/stylesheetsにあります。

mypt

2019/04/07 09:58

ファイル名が style.css であれば <%= stylesheet_link_tag "style", media: "all" %> になりますね ***.css の部分を <%= stylesheet_link_tag "***", media: "all" %> の引数に渡します

nashi

2019/04/07 11:51

やはりエラーは解消されないです。この一文を消すとエラーは無くなります・・・ bootstrap.min.cssをweb上のlinkで指定している事が関係ありますでしょうか？

mypt

2019/04/07 13:14

このエラー画面だけでははんだんできないんですが FullTrace にしてみてどこでエラーが出てるかわかりますか？＞bootstrap.min.cssをweb上のlinkで指定している事が関係ありますでしょうか？関係ないと思います <%= stylesheet_link_tag "style", media: "all" %> とした場合 SASS とは関係ないはずなんですが style.css 以外に style.scss が存在していたりしませんか？

nashi

2019/04/08 03:35

Fulltraceで見てみたはいいものの、調べても見方が分かりませんでした；どうやらapplication.scssnの末尾に @import "bootstrap-sprockets"; @import "bootstrap"; を書き加えると先ほどのエラーが発生するようです。

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

あなたの回答