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

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

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

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

www.reddit.com

vuetify.min.cssnode_modules配下のファイルなので、node_modulesgitignoreでコミット対象外にしていることが関係している気がするけど、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"
}
}