Bootstrap5の環境構築
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 ここを見るとだいたい解決する。