HerokuにデプロイするとVuetifyのCSSが読み込まれない

Vuetifyの導入方法をググると、大抵以下のやり方が紹介されているのだが、これだとHerokuにデプロイ時にVuetifyのCSSが反映されない。ローカルだと問題ない。

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

redditでも同じ事象の記事があった。

Vuetify styles not loading in rails 6 with vue app

vuetify.min.cssはnode_modules配下のファイルなので、node_modulesはgitignoreでコミット対象外にしていることが関係している気がするけど、package.jsonはもちろんコミットしているのでデプロイ時にnode_modulesは展開されているはず。

heroku-cliを使ってファイルを確認したらきちんと展開されてた。

~ $ ls -l node_modules/vuetify/dist/
total 5788
drwx------ 2 u39688 dyno    4096 Jan 16 15:16 json
-rw------- 1 u39688 dyno  644397 Jan 16 15:15 vuetify.css
-rw------- 1 u39688 dyno  807829 Jan 16 15:15 vuetify.css.map
-rw------- 1 u39688 dyno 1582491 Jan 16 15:15 vuetify.js
-rw------- 1 u39688 dyno 1835082 Jan 16 15:15 vuetify.js.map
-rw------- 1 u39688 dyno  529772 Jan 16 15:15 vuetify.min.css
-rw------- 1 u39688 dyno  505732 Jan 16 15:15 vuetify.min.js

仕方がないので、CDNで読み込むことにした。ついでにmaterial-design-iconsも読み込んでおく。

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

環境はRails6.0.3 で、package.jsonは以下。

{
 "name": "xxxxxx",
 "private": true,
 "dependencies": {
   "@rails/actioncable": "^6.0.0",
   "@rails/activestorage": "^6.0.0",
   "@rails/ujs": "^6.0.0",
   "@rails/webpacker": "4.3.0",
   "turbolinks": "^5.2.0",
   "vue": "^2.6.12",
   "vue-loader": "^15.9.3",
   "vue-router": "^3.4.5",
   "vue-template-compiler": "^2.6.12",
   "vuetify": "^2.3.10"
 },
 "version": "0.1.0",
 "devDependencies": {
   "@mdi/font": "^5.8.55",
   "webpack-dev-server": "^3.11.0"
 }
}