本番環境でCSS一部が効かない

ローカル環境ではCSSが効いているが
本番環境で確認すると一部のCSSが反映されません

configファイルは下記コードに変更しました。
config.assets.compile = true

原因わかる方がいましたら、ご教授お願いします。

下記が反映されないCSSです。

css
1 .btn,
2  a.btn,
3  button.btn {
4    margin-top: 50px;
5    font-size: 1.6rem;
6    font-weight: 700;
7    line-height: 1.5;
8    position: relative;
9    display: inline-block;
10    padding: 1rem 4rem;
11    cursor: pointer;
12    -webkit-user-select: none;
13    -moz-user-select: none;
14    -ms-user-select: none;
15    user-select: none;
16    -webkit-transition: all 0.3s;
17    transition: all 0.3s;
18    text-align: center;
19    vertical-align: middle;
20    text-decoration: none;
21    letter-spacing: 0.1em;
22    color: #ffffff;
23    border-radius: 0.5rem;
24  }
25  
26  a.btn-custom01 {
27    margin-bottom: 0.5rem;
28    padding: 0;
29    border-radius: 0.75rem;
30  }
31  
32  a.btn-custom01:before {
33    position: absolute;
34    top: 0;
35    right: 0;
36    bottom: 0;
37    left: 0;
38  
39    width: 100%;
40    height: 100%;
41  
42    content: "";
43    -webkit-transition: all 0.3s;
44    transition: all 0.3s;
45    -webkit-transform: translate3d(0, 0.75rem, -1rem);
46    transform: translate3d(0, 0.75rem, -1rem);
47  
48    border: 2px solid #000;
49    border-radius: inherit;
50    background: #0a6dee;
51    -webkit-box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
52    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
53  }
54  
55  a.btn-custom01:after {
56    font-family: "Font Awesome 5 Free";
57    font-size: 2rem;
58    font-weight: normal;
59    line-height: 1;
60    position: absolute;
61    top: calc(50% - 1rem);
62    left: 1.5rem;
63    margin: 0;
64    padding: 0;
65    content: "\f0e0";
66  }
67  
68  .btn-custom01-front {
69    position: relative;
70    display: block;
71    padding: 1.5rem 5rem 1.5rem 5rem;
72  
73    -webkit-transition: all 0.3s;
74    transition: all 0.3s;
75    border: 2px solid #000;
76    border-radius: inherit;
77    background: #0084ff;
78  }
79  
80  .fa-position-left {
81    position: absolute;
82    top: calc(50% - 0.5em);
83    left: 1rem;
84  }
85  
86  .fa-position-right {
87    position: absolute;
88    top: calc(50% - 0.5em);
89    right: 1rem;
90  }
91  
92  a.btn-custom01:hover {
93    -webkit-transform: translate(0, 0.25rem);
94    transform: translate(0, 0.25rem);
95    background: #0084ff;
96  }
97  
98  a.btn-custom01:hover:before {
99    -webkit-transform: translate3d(0, 0.5rem, -1rem);
100    transform: translate3d(0, 0.5rem, -1rem);
101    -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
102    box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
103  }
104  
105  a.btn-custom01:hover:after {
106    content: "\f2b6";
107  }
108  
109  a.btn-custom01:active {
110    -webkit-transform: translate(0rem, 0.75rem);
111    transform: translate(0rem, 0.75rem);
112  }
113  
114  a.btn-custom01:active:before {
115    -webkit-transform: translate3d(0, 0, -1rem);
116    transform: translate3d(0, 0, -1rem);
117    -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
118    box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
119  }
120  
121  a.btn-custom01:active:after {
122    content: "\f2b6";
123  }

ファイル名config/environments/production.rb


config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

  
  config.assets.js_compressor = :uglifier
  config.assets.css_compressor = :scss


  config.assets.compile = true

maisumakun

2021/06/02 13:30

> 下記が反映されないCSSです。・適用されないことは、どのように確認しましたか？・当該の記述はどこに書いて、それをどのように呼び出していますか？

MISIAN-MISIAN

2021/06/02 13:34 編集

本番環境とhttp://localhost:3000/を見比べた際に適用されていません。上記のcssの一部のコードのみ反映されません。よろしくお願いします。

maisumakun

2021/06/02 13:45 編集

> 本番環境とhttp://localhost:3000/を見比べた際に適用されていません。ブラウザサイドのDeveloper Toolsでの調査は行ってみましたか？

hope_mucci

2021/06/02 15:26

反映されていないのは特定のCSSファイルの中身全部ということでしょうか？それともCSSファイルに記載されている内容の一部でしょうか？

hope_mucci

2021/06/02 15:27

あと、スーパーリロード、ブラウザキャッシュの削除は試してみましたか？以前に本番環境にデプロイしたファイルのキャッシュがブラウザに残っているかも。

MISIAN-MISIAN

2021/06/03 12:10

CSSファイルに記載されている内容の一部が反映されません。スーパーリロードとキャッシュの消去とハードの再読み込みを行いましたが変わらず反映されません。他に考えられる原因ありますでしょうか？

hope_mucci

2021/06/03 12:28

CSSファイル自体は期待通り作成されている、ということで間違いないでしょうか。また、デプロイしたサーバ側にアップロードされているCSSファイルも同様に上記内容は記載されているのも確認しましたか？

MISIAN-MISIAN

2021/06/03 13:46

CSSファイル自体は期待通り作成できていると思います。デプロイしたサーバーのブラウザサイドのDeveloper Toolsで検証した際にcssのコードが明らかに少ないように感じます。

maisumakun

2021/06/03 13:49

デプロイ操作はどのように行っていますか？

MISIAN-MISIAN

2021/06/03 13:59 編集

heroku でデプロイしています。以前から公開していたサイトですが、今回、少し修正して、git push heroku masterしなおしました。すると、今回追記したコードのcssが反映されません。変更した点としまして、RailsのGPL混入問題の対策のためにrails のバージョン変更など行いました。

hope_mucci

2021/06/03 14:07

devtoolsにて、以下の2つの方法でcss確認してください。 - Elementsタブで、cssが適用されるはずの要素を選び、右側のStylesタブで当該のcssがリストのどこかで出てくるか確認する。 - Sourcesタブで読み込まれているはずのcssファイルを探し、ローカル側の内容と一致しているかを確認する。前者で問題のcssブロックが見つかるのであれば、何か別の指定でスタイルが上書きされている可能性があります。後者でcssファイルの中身が一致しない場合、git pushかデプロイが正常にできていないと思われます。