nextjsでbootstrapのcssをoverrideする

Next.jsとbootstrapで作ったナビゲーションバーのcaret（下向き三角的なやつ）をbootstrapのcssをoverrideして消そうと思ったらなかなか消えなくて地味にハマった。

stackoverflow.com

上の記事の通りに作ったCSSが効かない

.dropdown-toggle::after {
  display: none;
 }

!importantを追加したら反映された。

.dropdown-toggle::after {
  display: none !important;
 }