Vuetify css 不适用于 Heroku答案

【问题标题】：Vuetify css not applying in HerokuVuetify css 不适用于 Heroku
【发布时间】：2021-04-18 19:51:18
【问题描述】：

我正在开发一个通过 webpacker 使用 vue 的 rails 应用程序。在 vue 应用程序内部，我像这样导入 vuetify 和 vuetify.css：

import Vue from 'vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import 'vuetify/dist/vuetify.min.css'
import App from '../app.vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import Vuex from 'vuex'

在本地工作正常，但当推送到 heroku 时它不再工作。该应用程序已部署，并且似乎包含了 vuetify，但未包含 vuetify css。为什么是这样？包括其他 css 功能。我尝试像这样在我的 application.scss 文件中导入 vuetify css，但没有运气：

@import '~vuetify/src/vuetify.min.css';

@import '~node_modules/vuetify/dist/vuetify.min.css';

另外，我打算稍后将 vue 应用与 rails 应用解耦，那这还会是问题吗？

【问题讨论】：

标签： css ruby-on-rails vue.js heroku vuejs2

【解决方案1】：

您需要主要遵循此处的 Webpack 说明 - https://vuetifyjs.com/en/getting-started/installation/#webpack-install（但忽略安装 sass-loader，因为它应该已经到位）。

yarn add vuetify

在你的 vuetify 插件的顶部添加这个：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

删除：

@import '~vuetify/src/vuetify.min.css';

@import '~node_modules/vuetify/dist/vuetify.min.css';

import 'vuetify/dist/vuetify.min.css'

^ sass 应该打包 vuetify css

【讨论】：