Rails5にてbootstrap4を導入したが、自分のCSSが反映されない

お世話になります。
タイトル通りですが、Rails5にてBootstrap4を導入したのですが、自分のCSSが反映されません。
インラインCSSやヘッダーStyleタグで直接HTMLに打ち込むと反映されるので、外部のCSSが読み込まれてない感じです。assets/stylesheets/custom.scssというファイルで作成しました。

Bootstrap4の導入は下記リンクを参考にしています。
Bootstrapの導入方法

また、Bootstrap自体は反映されています。

下記主要なファイルです。

application.scss

scss
1@import "bootstrap"
2
3/*
4 * This is a manifest file that'll be compiled into application.css, which will include all the files
5 * listed below.
6 *
7 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
8 * vendor/assets/stylesheets directory can be referenced here using a relative path.
9 *
10 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
11 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
12 * files in this directory. Styles in this file should be added after the last require_* statement.
13 * It is generally better to create a new file per style scope.
14 *
15*/
16

application.js

js
1// This is a manifest file that'll be compiled into application.js, which will include all the files
2// listed below.
3//
4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
5// vendor/assets/javascripts directory can be referenced here using a relative path.
6//
7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8// compiled file. JavaScript code in this file should be added after the last require_* statement.
9//
10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11// about supported directives.
12//
13//= require jquery3
14//= require popper
15//= require bootstrap
16//= require rails-ujs
17//= require turbolinks
18//= require_tree .
19

下記、現在インストールしているgemです。

gem
1actioncable (5.1.6, 5.1.5)
2actionmailer (5.1.6, 5.1.5)
3actionpack (5.1.6, 5.1.5)
4actionview (5.1.6, 5.1.5)
5activejob (5.1.6, 5.1.5)
6
7activemodel (5.1.6, 5.1.5)
8activerecord (5.1.6, 5.1.5)
9activesupport (5.1.6, 5.1.5)
10addressable (2.5.2)
11ansi (1.5.0)
12arel (8.0.0)
13ast (2.4.0)
14autoprefixer-rails (9.3.1, 9.2.1, 9.1.4)
15bcrypt (3.1.12, 3.1.11)
16bigdecimal (default: 1.3.4)
17bindex (0.5.0)
18bootstrap (4.1.3)
19bootstrap-will_paginate (1.0.0)
20builder (3.2.3)
21bullet (5.9.0, 5.8.1)
22bundler (1.16.3)
23byebug (10.0.2, 9.0.6)
24capybara (2.18.0)
25carrierwave (1.2.2)
26childprocess (0.9.0)
27choice (0.2.0)
28cmath (default: 1.0.0)
29coderay (1.1.2)
30coffee-rails (4.2.2)
31coffee-script (2.4.1)
32
33coffee-script-source (1.12.2)
34concurrent-ruby (1.1.3, 1.0.5)
35crass (1.0.4)
36csv (default: 1.0.0)
37date (default: 1.0.0)
38dbm (default: 1.0.0)
39devise (4.5.0)
40diff-lcs (1.3)
41erubi (1.7.1)
42etc (default: 1.0.0)
43execjs (2.7.0)
44factory_bot (4.11.1)
45factory_bot_rails (4.11.1)
46faker (1.7.3)
47faraday (0.15.3)
48fcntl (default: 1.0.0)
49ffi (1.9.25)
50fiddle (default: 1.0.0)
51filetree (1.0.0)
52fileutils (default: 1.0.2)
53formatador (0.2.5)
54globalid (0.4.1)
55guard (2.13.0)
56guard-compat (1.2.1)
57guard-minitest (2.4.4)
58hashie (3.5.7)
59
60hpricot (0.8.6)
61html2slim (0.2.0)
62i18n (1.1.1, 0.9.5)
63io-console (default: 0.4.6)
64ipaddr (default: 1.2.0)
65jaro_winkler (1.5.1 x86_64-darwin-17)
66jbuilder (2.8.0, 2.7.0)
67jquery-rails (4.3.3, 4.3.1)
68jruby-jars (1.7.27)
69jruby-parser (0.5.4)
70json (default: 2.1.0)
71kaminari (1.1.1)
72kaminari-actionview (1.1.1)
73kaminari-activerecord (1.1.1)
74kaminari-bootstrap (3.0.1)
75kaminari-core (1.1.1)
76launchy (2.4.3)
77listen (3.1.5)
78loofah (2.2.3, 2.2.2)
79lumberjack (1.0.13)
80mail (2.7.1, 2.7.0)
81method_source (0.9.2, 0.9.1, 0.9.0)
82mime-types (3.2.2)
83mime-types-data (3.2018.0812)
84mini_magick (4.7.0)
85mini_mime (1.0.1)
86mini_portile2 (2.3.0)
87minitest (5.11.3)
88minitest-reporters (1.1.14)
89multi_json (1.13.1)
90multipart-post (2.0.0)
91mustermann (1.0.3)
92nenv (0.3.0)
93nio4r (2.3.1)
94nokogiri (1.8.5, 1.8.4)
95notiffany (0.1.1)
96oauth (0.5.4)
97omniauth (1.8.1)
98omniauth-oauth (1.1.0)
99omniauth-twitter (1.4.0)
100openssl (default: 2.1.0)
101orm_adapter (0.5.0)
102parallel (1.12.1)
103parser (2.5.3.0)
104popper_js (1.14.5, 1.14.3)
105powerpack (0.1.2)
106pry (0.12.2, 0.11.3)
107pry-byebug (3.6.0)
108pry-rails (0.3.7, 0.3.6)
109psych (default: 3.0.2)
110public_suffix (3.0.3)
111puma (3.12.0, 3.9.1)
112
113rack (2.0.6, 2.0.5)
114rack-protection (2.0.4)
115rack-test (1.1.0)
116rails (5.1.6, 5.1.5)
117rails-controller-testing (1.0.2)
118rails-dom-testing (2.0.3)
119rails-erd (1.5.2)
120rails-html-sanitizer (1.0.4)
121railties (5.1.6, 5.1.5)
122rainbow (3.0.0)
123rake (12.3.1, 10.5.0)
124ransack (2.0.1)
125rb-fsevent (0.10.3)
126rb-inotify (0.9.10)
127rdoc (default: 6.0.1)
128responders (2.4.0)
129rsense (0.5.18)
130rsense-core (0.6.6)
131rsense-server (0.5.18)
132rspec-core (3.8.0)
133rsense-server (0.5.18)
134rspec-core (3.8.0)
135rspec-expectations (3.8.2)
136rspec-mocks (3.8.0)
137rspec-rails (3.8.1)
138rspec-support (3.8.0)
139rubocop (0.60.0)
140ruby-graphviz (1.2.3)
141ruby-progressbar (1.10.0)
142ruby_dep (1.5.0)
143rubyzip (1.2.2)
144sass (3.7.2, 3.6.0)
145sass-listen (4.0.0)
146scanf (default: 1.0.0)
147sdbm (default: 1.0.0)
148selenium-webdriver (3.141.0)
149shellany (0.0.1)
150shoulda-matchers (3.1.2)
151sinatra (2.0.4)
152slim (4.0.1, 3.0.9)
153slim-rails (3.2.0, 3.1.3)
154spoon (0.0.6)
155spring (2.0.2)
156spring-commands-rspec (1.0.4)
157spring-watcher-listen (2.0.1)
158sprockets (3.7.2)
159sprockets-rails (3.2.1)
160sqlite3 (1.3.13)
161stringio (default: 0.0.1)
162strscan (default: 1.0.0)
163syntax (1.2.2)
164temple (0.8.0)
165thor (0.20.3, 0.20.0, 0.19.4)
166thread_safe (0.3.6)
167tilt (2.0.8)
168turbolinks (5.2.0, 5.0.1)
169turbolinks-source (5.2.0)
170tzinfo (1.2.5)
171uglifier (4.1.20, 4.1.19, 3.2.0)
172unicode-display_width (1.4.0)
173uniform_notifier (1.12.1)
174warden (1.2.8, 1.2.7)
175web-console (3.7.0, 3.5.1)
176webrick (default: 1.4.2)
177websocket-driver (0.6.5)
178websocket-extensions (0.1.3)
179will_paginate (3.1.6)
180xpath (3.2.0)
181zlib (default: 1.0.0)

以上よろしくお願いします。

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

回答1件

ベストアンサー

詳しい状況がわからないのですが、まずcustom.scssのコンパイルはできているのでしょうか？

投稿2018/11/27 23:56

oh_rusty_nail

総合スコア319

oh_rusty_nail

2018/11/28 00:03

別のファイルで書かれているのかもしれませんが、今書かれているapplication.scss に custom.scssを追加すると反映されると思いますがいかがでしょうか？

dounatsu

2018/11/28 00:15

現状development環境で動かしているのですが、ソースを見る限りSCSS自体読み込まれてなさそうです。（assets/application.self-.........の様なファイルだけ読み込まれています。boostrapmのCSSだと思うのですが。）

oh_rusty_nail

2018/11/28 00:23

そういえば、sass-railsがgemのリストにないですが、sass-railsもしくはそれに代替する物は入れてますでしょうか？ https://github.com/rails/sass-rails

dounatsu

2018/11/28 01:06

bootstrapのgemと競合しているのかと思って、一回アンインストールしました。もう一度インストールしましたが、状況は同じです。

oh_rusty_nail

2018/11/28 03:08

boot-strapを一旦除外して、ご自身で作成されたscssが効くのか切り分けた方がいいかもしれません。「Rails5にてbootstrap4を導入したが、自分のCSSが反映されない」=> 「Rails5にて自分のCSSが反映されない」かもしれませんので

dounatsu

2018/11/28 07:02

bootstrapとjquery-railsをアンインストールして確認しましたが、CSSは動きました。 bootstrap導入時にapplication.scssで*= require、*= require_treeを削除したのが怪しいですね（今回はこれを戻しました）。これを復活させれば動くのかもしれないですが、公式ドキュメントでもこれは削除しろって書いてあるので、なるべく削除しておきたいのですが。（後日またよく分からない不具合が出ても嫌なので。。。）

dounatsu

2018/11/28 07:18

試しに@import "custom";としたら読み込む様になったのですが、これは正規のやり方なのでしょうか？

oh_rusty_nail

2018/11/28 08:05

これ自体は期待通りに動いていますね！ > 試しに@import "custom";としたら読み込む様になったただ、やりたいことは表題の通りなので、この記事参考になるかもしれません。 http://blog.10rane.com/2015/04/02/how-to-manage-the-page-specific-scss-in-rails/

dounatsu

2018/11/28 08:12

ありがとうございます。一応@importで解決する様なので安心しました。この方法だとCSSファイル1つにまとめられるので、結果的にhttpリクエストが減って良いのかもしれません。（実際どうなのかは分かりませんが。）ありがとうございました。

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