css - Vuetify 部署后无法正常显示

标签 css azure vue.js deployment vuetify.js

我构建了一个使用 vue.js 作为前端的 spa。具体来说,我将 vuetify 库用于许多组件和布局。该网站在本地运行时看起来很漂亮。我刚刚将其部署到 Azure,所有 vuetify 样式似乎都消失了。我编写的任何自定义 css 都会生效,但属于 vuetify 的任何内容根本不会随其样式一起出现。开发者控制台中没有错误消息。有什么见解吗?

最佳答案

在您的 plugins/vuetify.js 文件中,确保包含缩小的 vuetify CSS,如下所示(请参阅 docs ):

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css' // <<< THIS

Vue.use(Vuetify);

export default new Vuetify({
});

我错过了该行并且有相同的症状 - 样式在本地看起来很好(head 元素中包含很多 style 标签),但在 Azure 静态 Web 应用程序中却不然。

关于css - Vuetify 部署后无法正常显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61472717/

相关文章:

azure - 有没有办法从 Azure 自动化帐户的混合工作组中删除过时的机器工作人员?

javascript - 无法运行 Node JS 部署到 Azure

javascript - Vue.js 中 'data:' 、 'data: ()' 和 'data()' 之间有什么区别

javascript - 单击时多次(循环)更改 Div 背景颜色

jQuery 附加第二类

css - 如何调试 CSS calc() 值?

html 在网页上保留用户历史记录

Azure 函数主机 : worker process was unable to start

vue.js - 从 vue 客户端使用 mongoose 进行模糊搜索

javascript - vuejs - 如何将 Prop 和事件动态传递给动态组件