ASP.NET Core with Vue.jsでbootstrapを4にしたい。
package.jsonにバージョンが書かれているのでこれを4に上げれば終わりかと思ったら、凄く苦労した。
まずはpackage.jsonを変更。バージョンを勝手に教えてくれる。これ凄い！
"bootstrap": "^4.1.2",
キャレット(＾)ってなんだ？と思ったのでpackage.jsonのルールを確認。
これでVSビルドしてもまだ上がらない。色々見ていたら依存関係のNPMの中のbootstrapのバージョンが上がっていない。
上げ方を調べたら以下に書いてあった。
npmの再更新は以下。ところが失敗する。npmのバージョンが6より古いみたい。
pacakge.jsonを右クリックし「パッケージの復元」を選択すると、再インストールできます。
バージョン上げるのは嫌なので、昨日入れたnode.jsにつなげば良いかなーと思って設定を調べる。以下に足せばOK。ところがnode.js変えてもうまく動かない。
結局、stackoverflowをみて「C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Web\External」に入っていることは分かったので、こっちを上げる。正しい上げ方も結局分からず、コマンドでアップデートも上手く上がらなかったので、node.jsのnpmを上書き。なんか嫌なやり方だなと思いつつ一応上手くいった。
でも、まだbootstrapの依存関係でエラー。package.jsonにpopperがない。bootstrapにそんなの必要だっけ？と思いつつ、popper書いてもまたエラー。依存関係のNPMの中で直接「パッケージの更新」してやったら上手くいった。bootstrapもはれて4.1.2。ところが実行してやると、まだ使っているのはbootstrap3。なんでやねん！
色々見ていると実行した場合bootstrap.cssを直で使っているわけではなく、vendor.cssにまとめられている。じゃあvender.cssをアップデートするのは？ほんとに分からないことだらけだ。
これはwebpackが関係しているようで、webpack.config.jsでBundler & MinifierのRe-bundle Fileしてもやっぱり作れない。
結局webpackを更新するためにbundleconfig.jsonやらgulpfile.jsやらその都度設定を調べて、バージョンアップして、タスクランナーエクスプローラーも使ってみて、色々試したけれど、結局更新できず。
その後アドバイスをもらってwebpackを直接叩けば良いのではと言われて、以下をやったらやっとvendor.cssが更新された。
node_modules\.bin\webpack --config webpack.config.vendor.js
で、無事bootstrap4になった。ふー。
