Vuetify design is broken when deployed on Heroku - css

Question

Assumption
I am building a service with docker and Nuxt.js.. I am using Vuetyify for the user interface, but when deployed to Heroku, the CSS design is broken. Specifically, the alert width is not applied, there are blank spaces in the alert area, and other strange behavior. It works fine in the development environment. I have looked into it, but all I found is that the CSS loads differently in the development environment than in the production environment.
Is there any solution to this problem?
What we want to solve
I want to solve Vuetify design collapse on Heroku.
Code
package.json
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"export": "nuxt export",
"serve": "nuxt serve",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "yarn lint:js",
"test": "jest"
},
"dependencies": {
"#nuxtjs/auth": "^4.9.1",
"#nuxtjs/axios": "^5.13.6",
"#vue/test-utils": "^1.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.4.6",
"core-js": "^3.9.1",
"jest": "^27.4.7",
"moment": "^2.29.1",
"nuxt": "^2.15.3",
"vue-jest": "^3.0.7"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/preset-env": "^7.16.11",
"#nuxtjs/eslint-config": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/vuetify": "^1.11.3",
"babel-eslint": "^10.1.0",
"eslint": "^7.22.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-vue": "^7.7.0"
}
}
nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
publicRuntimeConfig: {
APP_NAME: process.env.APP_NAME,
BOOK_URL: process.env.BOOK_URL,
AXIOS_POST: process.env.AXIOS_POST
},
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'KOUDOKU',
htmlAttrs: {
lang: 'ja'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
・
・
・
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
'#nuxtjs/eslint-module',
// Doc: https://www.npmjs.com/package/#nuxtjs/vuetify
'#nuxtjs/vuetify'
],
moment: {
locales: ['ja']
},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
・
・
・
// Added for anti-styling
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|scss)$/,
chunks: 'initial',
enforce: true
},
components: {
name: 'components',
test: /app\/components/,
chunks: 'all',
enforce: true
}
}
}
}
},
router: {
middleware: ['auth']
}
}
heroku.yml
setup:
config:
NODE_ENV: production
NPM_CONFIG_PRODUCTION: false
build:
docker:
web: Dockerfile
config:
WORKDIR: app
API_URL: "https://book-app-api-v1.herokuapp.com"
run:
web: yarn run start