[Feat] Semi可以帮忙做一个vite插件处理主题和tailwindcss兼容嘛

[1057105012]

Feature Description 功能描述

希望官方对于vite的tailwind支持方案， 将semi-webpack-plugin迁移一份兼容的semi-vite-plugin

Additional information 补充说明

出于一些原因，项目必须基于vite开发， 想要使用semi的ui, 但是我并没有发现semi-vite-plugin插件的存在， 希望社区推动下这件事情。

[DaiQiangReal]

webpack 插件里对于 cssLayer 生效的其实也就一行。作用就是将所有 semi 来源的 css 都用一个 @layer semi{} 包裹起来

可以自己写个针对 cssLayer 的 vite 插件，也很快只有几行。我们官方对于 vite 的支持会在近期上线，目前社区的 vite 插件是没有 cssLayer 功能的

[iwgyyyy]

vite-plugin-semi-theme （0.6.0版本）这个插件已经支持@layer了。

在引入的tailwind css文件入口将原本的代码

@tailwind base;
@tailwind components;
@tailwind utilities;

改为

@layer tailwind-base, semi, tailwind-components, tailwind-utils;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@layer tailwind-utils {
  @tailwind utilities;
}

在 vite.config.ts配置文件中加入下面这几行开启 cssLayer

import semi from 'vite-plugin-semi-theme';

export default defineConfig({
    plugins: [
      semi({
        theme: '@douyinfe/semi-theme-default',  // 这里可以换成自己的主题包
        options: { cssLayer: true }
      })
    ],
});