vue+vite+ant-desing-vue，使用TSX，浏览器未加载样式

[YTT-TTY]

vue版本 3.2.31 ant-design-vue版本3.0.0-beta.11 使用unplugin-vue-components按需加载，tsx文件浏览器样式未生效。

[nabaonan]

如果不使用模板语法应该不生效

[lvjiaxuan]

代码也不show一下

[GKLL]

什么时候可以支持tsx呢

[cumt-robin]

有同样诉求，好像 tsx 中使用组件不能自动识别加载样式

[liamwang]

目前只能结合 vite-plugin-style-import 一起用

[cumt-robin]

目前只能结合 vite-plugin-style-import 一起用

我暂时也是这么做的

[devie2020]

目前只能结合 vite-plugin-style-import 一起用

这个插件似乎断点有问题啊

[devie2020]

vue版本 3.2.31 ant-design-vue版本3.0.0-beta.11 使用unplugin-vue-components按需加载，tsx文件浏览器样式未生效。

我没有使用tsx，似乎连样式都加载不了

[RosApr]

感觉支持tsx/jsx应该挺难的，因为原理是在解析template的时候来做加载的，如果是tsx的话，时机不好判断

[eiinu]

在 unplugin-vue-components 插件配置 include 字段中增加 tsx：

Components({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
  ],
  resolvers: [
    AntDesignVueResolver()
  ]
})

include 的默认值是 [/\.vue$/, /\.vue\?vue/]

[YTT-TTY]

在 unplugin-vue-components 插件配置 include 字段中增加 tsx：

Components({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
  ],
  resolvers: [
    AntDesignVueResolver()
  ]
})

include 的默认值是 [/\.vue$/, /\.vue\?vue/]

设置include后，需要在main.ts 中引入样式文件（import 'ant-design-vue/dist/antd.less）吗？ 我试了一下设置include，样式并没有加载进来，unplugin-vue-components:"^0.23.0";ant-design-vue:"^3.2.15";

[eiinu]

在 unplugin-vue-components 插件配置 include 字段中增加 tsx：

Components({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
  ],
  resolvers: [
    AntDesignVueResolver()
  ]
})

include 的默认值是 [/\.vue$/, /\.vue\?vue/]

设置include后，需要在main.ts 中引入样式文件（import 'ant-design-vue/dist/antd.less）吗？ 我试了一下设置include，样式并没有加载进来，unplugin-vue-components:"^0.23.0";ant-design-vue:"^3.2.15";

不需要在 main.ts 中全量引入样式文件。

unplugin-vue-components 插件会自动引入组件，并按需引入对应的样式文件（特殊的函数式组件除外，比如 messgae）。

这里有一个 vite + antdv + jsx 的 demo 可以试下 stackblitz

[TLovers]

@eiinu 有的组件好像可以加载样式 有的好像不可以

[cumt-robin]

您的邮件我已收到！  我会在第一时间内回复您！非常感谢！

[G1King]

在 unplugin-vue-components 插件配置 include 字段中增加 tsx：

Components({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/, /\.vue\?vue/, // .vue
  ],
  resolvers: [
    AntDesignVueResolver()
  ]
})

include 的默认值是 [/\.vue$/, /\.vue\?vue/]

设置include后，需要在main.ts 中引入样式文件（import 'ant-design-vue/dist/antd.less）吗？ 我试了一下设置include，样式并没有加载进来，unplugin-vue-components:"^0.23.0";ant-design-vue:"^3.2.15";

不需要在 main.ts 中全量引入样式文件。

unplugin-vue-components 插件会自动引入组件，并按需引入对应的样式文件（特殊的函数式组件除外，比如 messgae）。

这里有一个 vite + antdv + jsx 的 demo 可以试下 stackblitz

这样设置了 样式也没有自动引入

[eiinu]

这样设置了 样式也没有自动引入

可以对比下 stackblitz 中的项目，看看在配置或者使用上有哪些区别，导致了样式引入失败。