Vuetify css 不适用于 Heroku [英] Vuetify css not applying in Heroku

问题描述

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

I'm developing a rails app, that uses vue through webpacker. Inside of the vue app I import vuetify and vuetify.css like so:

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，但没有运气:

Works fine locally, but when pushed to heroku it no longer works. The app deploys, and it appears like vuetify is included, but the vuetify css is not. Why is this? Other css features are included. I tried importing vuetify css in my application.scss file like so, but no luck:

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

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

另外，我打算稍后将 vue 应用与 rails 应用解耦，这样还会有问题吗?

Further, I plan on decoupling the vue app from the rails app later, will this still be a problem then?

推荐答案

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

You'll need to mostly follow the Webpack Instructions here - https://vuetifyjs.com/en/getting-started/installation/#webpack-install (but ignore installing the sass-loader, since that should be already in place).

yarn 添加 vuetify

在你的 vuetify 插件顶部添加:

Add this at the top of your vuetify plugin:

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

^ sass should pack the vuetify css

这篇关于Vuetify css 不适用于 Heroku的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！