vue 3 + vuetify 3：在 Array.map (<anonymous>) 处创建的节点类型未知

Question

我正在从 vue2 迁移到 vue3 以及 vuetify 3。但是，我无法正确设置 vuetify 3。我收到以下错误

Syntax Error: Error: Unknown node type in node creation at Array.map (anonymous)

在以下行中：

in ./node_modules/vuetify/lib/components/VList/VListItem.css
in ./node_modules/vuetify/lib/components/VCard/VCard.css
in ./node_modules/vuetify/lib/components/VBtn/VBtn.css

我尝试通过以下链接修复它

[Bug Report][3.0.0-alpha.0] Vuetify 3 'Unknown node type in node creation' bug #14179

vuetify-loader

但是没有成功。

vuetify.js:

// Styles
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import colors from "vuetify/lib/util/colors";

// Vuetify
import { createVuetify } from "vuetify";

    export default createVuetify({
      theme: {
        themes: {
          options: { customProperties: true },
          light: {
            primary: "#FF6D00",
          },
          dark: {
            primary: "#FFCA28",
          },
        },
      },
      icons: {
        iconfont: "mdi", 
      },
    });

main.js:

const app = createApp({
  data: function () {
    return {
      currentRoute: window.location.pathname,
    };
  },    
  computed: {
    ViewComponent() {
      return routes[this.currentRoute] || NotFound;
    },
  },
  render() {
    return h(this.ViewComponent);
  },
});

Answer 1

您使用的是不完全支持 @supports (https://github.com/postcss/autoprefixer/issues/1391) 的旧版自动前缀。将 postcss 和 autoprefixer 更新到最新版本将修复错误。

vue 3 + vuetify 3：在 Array.map (<anonymous>) 处创建的节点类型未知

vue 3 + vuetify 3: Unknown node type in node creation at Array.map (<anonymous>)

vue.js

vuetify.js

vuejs3