Vue Cli 3 - Typescript - Vuetify 样式不能与@WithRender 一起使用单独的模板文件

Question

我的源码如下，

<script lang='ts'>
import { Vue, Component, Prop } from 'vue-property-decorator';
import WithRender from './ali-ums-progress.html';
import Constants from '../../constants';

@WithRender
@Component
export default class AliUMSProgress extends Vue {
}
</script>

<style lang='scss' scoped>
  @import './ali-ums-progress.scss';
</style>

HTML 和 scss 文件分开保存。使用 @WithRender html 内容正在呈现，但 vuetify 默认样式不起作用。

有人可以帮我吗？

Answer 1

我找到了解决方案...

使用命令“vue add vuetify”安装 vuetify 后创建文件“src/plugins/vuetify.ts”。

在此文件中，将行 import Vuetify from 'vuetify/lib' 替换为 import Vuetify from 'vuetify' 解决了我的问题问题。

Answer 2

Vuetify 插件文件必须包含如下所示的 样式导入 (documentation):

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css' <------ here
Vue.use(Vuetify);

export default new Vuetify({
});

对我有用。

Vue Cli 3 - Typescript - Vuetify 样式不能与@WithRender 一起使用单独的模板文件

Vue Cli 3 - Typescript - Vuetify styles not working with separate template file with @WithRender

typescript

vuetify.js

vue-cli-3