结合UnoCSS使用时会有样式冲突

[liect]

trafficstars

tdesign-vue-next 版本

0.20.5

重现链接

No response

重现步骤

在结合UnoCSS使用时会有样式冲突,原因是Tdsign的样式会注入到UnoCSS之后

可否提供控制样式注入位置的方法?

类似Naive UI的这个

期望结果

解决样式冲突

实际结果

No response

框架版本

No response

浏览器版本

Chrome(105)

系统版本

Windows11

Node版本

16

补充说明

No response

[github-actions[bot]]

👋 @Aicmortal，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[PengYYYYY]

调整一下引用顺序呢，看起来应该不是组件库的问题

[liect]

调整一下引用顺序呢，看起来应该不是组件库的问题 @pengYYYYY

import "uno.css";

在min.ts中调整到UnoCSS调整到最后确实会在开发环境中解决这个问题,但是生产产物依旧存在

我不确定是不是Vite的这个问题,dev is A -> B -> C, prod is A -> (B + C),感觉应该是😂 vitejs/vite#9949

naive ui 在编译产物中的css依旧会单独出现在head标签中 而Tdesign在开发时样式时单独在head中的,生产产物似乎又和页面组件的CSS打包在了一起

所以Tdesign可否提供这种机制呢?

[liect]

@pengYYYYY 我发现我调整import顺序之所以生效的原因也很奇怪

main.ts

import 'tdesign-vue-next/es/style/index.css';
import './styles/base.css';

// Router
import { Router } from '/@/router';

// UnoCSS在这个文件之后就可以在开发环境中生效
import "@/global";

// UnoCSS
import 'uno.css';

global.ts 在这个文件中导入了MessagePlugin ,测试发现,tdesgin在这里会导入所有的样式文件,然后按照顺序unocss的样式在之后导入了,所以才生效了

import { MessagePlugin } from "tdesign-vue-next";

// 挂载message到全局
window.$message = MessagePlugin;

这样显然有些不合适,要是在main中的导入链中没有包含Tdeisgn相关的导入,那么UnoCSS就会永远处在Tdesign之前,无法生效

[github-actions[bot]]

任何人都可以处理此问题。 请务必在您的 pull request 中引用此问题。 :sparkles: 感谢你的贡献! :sparkles: