yarn add jquery bootstrap popper.js
package.json
{
"name": "techpit_match",
"private": true,
"dependencies": {
"@popperjs/core": "^2.9.2",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.3.0",
"bootstrap": "^5.0.1",
"jquery": "^3.6.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
app/javascript/packs/application.js
import 'bootstrap'; import '../stylesheets/application';
app/views/top/index.html.erb
<%= link_to "仮のボタンです", "#", class: "btn btn-primary" %>
webpackerでBootstrapを導入したが、装飾されなかった。
原因と解決
bin/webpack-dev-server
上記のコマンドを実行して、コンパイルした結果にエラーが表示されているか確認したところ、Module not found: Error: Can't resolve '@popperjs/core'と表示されました。
yarn remove popper.js yarn add @popperjs/core
とすることで、Bootstrapが依存しているpooperV2に変更できます。これでBootstrapの機能を使うことができました。
参考URL
