bootstrap5 ドロップダウンが表示されない

Question

bootstrap5を導入してドロップメニューを表示させようとしていますが表示されません。

    .dropdowon
      button.btn.btn-primary.dropdowon-toggle data-toggle='dropdown'
        | prymary
      ul.dropdown-menu
        li.dropdown-item
          =link_to root_path,'トップページ',class:'dropdown-item'

以下の手順でbootstrapを導入しました。

1

yarn add bootstrap @popperjs/core

2

import 'bootstrap';
import "../stylesheets/application.scss";

3
app/javascriptディレクトリの下にstylesheetsディレクトリを作り、application.scssを次のように記述

@import "bootstrap";

以上の手順で行いましたがドロップダウンが表示されないです。
他のbootstrapは適応されています。

よろしくお願いします。

rails -v
Rails 6.0.4.6

doctype html
html
  head
    title
      | ReserveRoom
    = csrf_meta_tags
    = csp_meta_tag
    meta[name="viewport" content="width=device-width,initial-scale=1"]
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  header
  - if user_signed_in?
    = render 'shared/login_user_header'
  - else 
    = render 'shared/before_header'
  body
    = render 'shared/flash_message'
    .container
      = yield

Comments

[m.ts10806]

js内でcssをimportしているのはどうしてでしょうか。

[poipoi618]

すみません！
slimの記載ミスとbootstrapt5のリファレンスを参照したら動きました！

[m.ts10806]

ではそのあたりを具体的にどう対応したのか顛末を回答として投稿して解決済みにしてください。