background-clip: text;の記述がうまく反映されない

前提・実現したいこと

Complete Portfolio Website with Bootstrap - HTML/CSS
でHTML&CSSの勉強をしています。

発生している問題・エラーメッセージ

background-clip: text;のtextの部分に黄色い波線（利用できるクイックフィックスはありません）が出てしまい、コードが反映されず困っています。

該当のソースコード

css
1
2.header_area .main-menu .navbar-nav .active a {
3    background: var(--gradient-color);
4    -webkit-background-clip: text;
5    -webkit-text-fill-color: transparent;
6    background-clip: text;
7}
8
9.header_area .main-menu .navbar-nav .active a:hover {
10    background: var(--gradient-color);
11    -webkit-background-clip: text;
12    -webkit-text-fill-color: transparent;
13    background-clip: text;
14}

試したこと

検索をしましたが原因がわからず、コードを書き直しでもうまくいきません。
解決できず行き詰っています。解決策や参考になりそうな記事、ページなどを教えていただけると嬉しいです。
よろしくお願いいたします。

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

・VSCodeを使っています。
・bootstrapのバージョンは4.5です。

Lhankor_Mhy

2021/10/05 05:17

VSCodeですか？

suuumo

2021/10/05 06:13

はい！エディタはVSCodeです（本文追記済）

Lhankor_Mhy

2021/10/05 06:19

気にしなくていいような気がするのですが、実行した際に何か問題が起きるのですか？

suuumo

2021/10/05 10:56

現状問題が発生しており、HTMLコードをプラウザで確認すると、ほとんどのテキストにスタイルが反映されない（HOMEのテキストのみスタイルが反映され、HOME以降のテキストはクリックしてもスタイルが反映されない）状態となっています。ただコメントを頂いてハッとしたのですが確かに問黄色い波線がついていても気にしなくてもいいような気がしてきました。まだ問題は解決していないのですが、background-clip: text;の値が反映されていない事が原因なのではと勝手に決めつけて質問していたのかもしれません。

suuumo

2021/10/05 11:20

Lhankor_Mhy様ありがとうございました！問題はbackground-clip: text;ではなく、別のところに合った様です。無事動くようになりました(*^^*)

Lhankor_Mhy

2021/10/06 00:42

ご解決されて何よりです。