通过vite方式引入windiCSS失败

JesseHooo commented 5 months ago

复现步骤： 1.初始化项目模板nestjs+vue3+ssr+pinia 2.根据windiCSS vite继承文档安卓npm包 npm i -D vite-plugin-windicss windicss 对应文档：https://cn.windicss.org/integrations/vite.html 3.修改config.ts

import type { UserConfig } from 'ssr-types'
import type { PluginOption } from 'vite'
import WindiCSS from 'vite-plugin-windicss'

const userConfig: UserConfig = {
    isVite: true,
    viteConfig: () => {
        return {
            common: {
                extraPlugin: WindiCSS()
            }
            // client: {
            //     processPlugin: (plugins: PluginOption[]): PluginOption[] => {
            //         return [
            //             WindiCSS(),
            //             ...plugins
            //         ]
            //     }
            // }
        }
    }
}

export { userConfig }

4.引入import 'virtual:windi.css' windCSS官网说明在main.js中加入此代码，本框架中vite入口文件大概是在/node_modules/ssr-plugin-vue3/esm/entry中? 看了ssr文档API没找到vite入口文件的钩子，尝试过在/web/components/layout/和对应vue页面引入均无法成功，所以请教下大佬

zhangyuang commented 5 months ago

新增 windi.config.js内容如下，vite-plugin-windicss 默认只扫描src目录下的文件

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['web/**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git']
  }
})

JesseHooo commented 5 months ago

增加windi.config.js配置后解决了，非常感谢

zhangyuang / ssr

通过vite方式引入windiCSS失败 #327