カスタムCSSの読み込み

Question

前提・実現したいこと

プログラミング初学者です。現在Railsチュートリアルに沿って学習しています。
サンプルアプリにbootstrapをインストールし、app/assets/stylesheets/にcustom.scssを作成し、読み込ませるという部分で、custom.scssに新たな変更を加えても反映されません。
サーバの再起動では変わりませんでした。
一度custom.scssを削除し、新たに作り直すと変更が反映されます。何か解決方法はないでしょうか。

該当のソースコード

========== Gemfile ==========
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',      '6.0.3'
gem 'bootstrap-sass', '3.4.1'
gem 'puma',       '4.3.4'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.4.5', require: false

group :development, :test do
  gem 'sqlite3', '1.4.1'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console',           '4.0.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.1.0'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'capybara',                 '3.28.0'
  gem 'selenium-webdriver',       '3.142.4'
  gem 'webdrivers',               '4.1.2'
  gem 'rails-controller-testing', '1.0.4'
  gem 'minitest',                 '5.11.3'
  gem 'minitest-reporters',       '1.3.8'
  gem 'guard',                    '2.16.2'
  gem 'guard-minitest',           '2.4.6'
end

group :production do
  gem 'pg', '1.1.4'
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


========= custom.scss =========
@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}
/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}



/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}


========= application.css =========
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

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

Ubuntu 18.04 LTS
ruby 2.7.1
Rails 6.0.3

Comments

[winterboum]

app/assets/stylesheets/application.* も載せてください
あ、Rails6か、、

Answer 1

Rails.root/bin に webpack-dev-server ってありませんか？

./bin/^Cbpack-dev-server&

して走らせておいてください

というより、、、、
チュートリアルはRails5ではないですか？
チュートリアルと同じversionでやらないといろいろ引っかかります

Comments

[kei__3]

チュートリアルは6.0に対応している方で学習しています。
Rails.root/bin に webpack-dev-serverはあります。
./bin/^Cbpack-dev-server& して走らせるというのは具体的にどのようにして走らせることができますでしょうか。
コマンドで実行すると、
kei@DESKTOP-KLC2EKF:~/environment2/sample_app/bin$ ^Cbpack-dev-server&
-bash: :s^Cbpack-dev-server&: substitution failed　となります。

[winterboum]

あ、typoしてました
Rails.rootにて　bin/webpack-dev-server & を実行してください

[kei__3]

kei@DESKTOP-KLC2EKF:~/environment2/sample_app$ bin/webpack-dev-server &
[1] 1706
kei@DESKTOP-KLC2EKF:~/environment2/sample_app$ ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /home/kei/environment2/sample_app/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: aef592c55f1d39945fe2
Version: webpack 4.44.1
Time: 5575ms
Built at: 09/01/2020 12:05:29 PM
Asset Size Chunks Chunk Names
js/application-7fe598ade5bef030c121.js 508 KiB application [emitted] [immutable] application
js/application-7fe598ade5bef030c121.js.map 573 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
ℹ ｢wdm｣: Compiled successfully.
となり、走らせることができましたが、custom.scssに変更を加えても反映されません。サーバーの再起動もしたのですが、変わりませんでした。

[winterboum]

はて、、、　わからん。
全く反映しないのではなく、変更しても反映しない　のですね？
つまり　custom.scss　は認識はされている

[kei__3]

custom.scssを消して、新たに作ると反映されるので認識はされてると思います。
なぜか一度だけ、webpack-dev-server を再起動し、サーバも再起動すると反映される事がありました。

[winterboum]

申し訳ない、力不足です。
私も６はまだ勉強途中なもので。

[kei__3]

こちらこそお時間いただき申し訳ないです。
いつもご回答くださりありがとうございます。