Rails6へのBootstrapの導入手順について、Googleの海に出るといろんな方法がある。。
どれが正しいからわからないのでひとつずつ試すしかない。ということで試してみました。
実際に出来た方法が、Yarnを使ってインストールする方法 です。
Bootstrapのバージョンによってもインストール方法は異なり、今回はBootstrap4を導入します。
iQeuryとpopper.jsを同時にインストールする
popper.jsはBootstrap4の一部のコンポーネントで必要となるためインストールします。
$ yarn add jquery@3.5.1 bootstrap@4.5.0 popper.js@1.16.0
@
を付けることでインストールするバージョンを指定することができます。
jqueryを読み込む設定をする
config/webpack/environment.js
を下記のように編集します。
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
module.exports = environment
BootstrapのCSSを読み込む設定を行う
app/javascript
下にstylesheets
ディレクトリを作成し、その下にapplication.scss
ファイルを作成します。
@import '~bootstrap/scss/bootstrap';
これにより、Bootstrapを読み込ませるマニフェストファイルの拡張子を合わせています。
BootstrapのJSを読み込む設定を行う
app/javascript/packs/application.js
に追記する。
// 省略
import 'bootstrap';
import '../stylesheets/application';
これでRails6にBootstrapを導入することができました。
うまく行かなかった2つの方法を参考にリンクを貼っておきます。
①
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/14/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240819T043831Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240819%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=62dad334621a4433c002e6634074c74f78e4ad9d9b5b6644f614b225b4b6b0f7)
【Rails】Webpackerを使ってjQueryとBootstrapを管理する方法
はじめに 本記事では、Rails 6.0から導入された「Webpacker」を使ってjQueryとBootstrapを管理する方法を説明します。 WebpackerでjQueryとBootstrapを管理 Railsアプリの作成 以下のコマンドを実行して、新しいRailsアプリを作成します。コマンド引数に_6.0.0_...
②
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmFpbHMlMjA2JUUzJTgxJUFCalF1ZXJ5JUUzJTgxJUE4Qm9vdHN0cmFwJUUzJTgyJTkyJUU1JTg1JUE1JUUzJTgyJThDJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kZjUyMmQzYTcwZjkzYzc2NTU4YTRjM2U5MDYyZTBhYg&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXp1dG9zYXRvJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mNTE0OTE1NTY1YTdmZGMwMzhiOGIwZjA5ZmYzMzI3Mg&blend-x=142&blend-y=486&blend-mode=normal&s=16e8c39cf3bb480f953149d93caff859)
Rails 6にjQueryとBootstrapを入れる - Qiita
この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、Rails 6/7にjQueryとBootstrap 5を入れる(その1)をごらんください。環境…
RailsとyarnとBootstrapそれぞれでバージョンが異なることにより、インストール方法もまちまちであることから、ネット上にいろんなインストール方法が溢れているのだろうと思います。
ぜひ今回ご紹介した方法をお試しください。
独学で躓いてしまっている場合、プログラミングスクールに通うより圧倒的にコスパの良いUdemyでの学習を個人的にはおすすめします!
【教育・学習】資格・学習
総合情報サイト「コレダ!」がお届けする教育・学習における資格・学習の総合情報サイトです。
コメント