Bootstrap5を使う必要ができたので、とりあえずローカルで環境構築してみた。 Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説

gulpのインストール

nodejsはインストール済だったので、gulpのインストールから。

npm install --global gulp-cli
npm init
npm install browser-sync gulp gulp-sass --save-dev
npm install bootstrap@next --save

githubからコードを持ってくる

github このチュートリアルのコードをcloneして適宜配置。あとは指示通りにやっていく感じだった。

sassライブラリが動かない

gulpで起動してみるとsassが動かんってエラーが出たので、glupfile.jsを変更したのと、npm でsassをインストール

npm install sass

#glupfile.jsの変更
var sass        = require('gulp-sass')(require('sass'));

これで動くようになった。

その他メモ

bootstrapで設定されている変数一覧を見たいときは以下のファイルを参照する

node_module/bootstrap/scss/_variables.scss

変数を設定、orverwriteする

app/scssディレクトリに_variables.scssを作るとそこが優先される

app/scss/_variables.scss
app/scss/_utilities.scss

これでローカルで適当に編集できるところができた。 困ったときは

Customize (カスタマイズ) · Bootstrap v5.0 ここを見るとだいたい解決する。