和 unocss 结合使用时，样式文件后缀不正确

[ModyQyW]

问题描述

和 unocss 结合使用时，样式文件后缀不正确。

复现步骤

npx degit dcloudio/uni-preset-vue#vite-ts playground
cd playground
npx @dcloudio/uvm alpha # 使用 yarn
yarn add unocss -D

// unocss.config.ts
import { defineConfig } from "unocss";

export default defineConfig({
  presets: [],
});

// main.ts
import { createSSRApp } from "vue";
import App from "./App.vue";
import "uno.css";
export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}

// vite.config.ts
import { defineConfig } from "vite";
import unocss from "unocss/vite";
import uni from "@dcloudio/vite-plugin-uni";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [unocss(), uni()],
});

yarn dev:mp-weixin

预期结果

应该生成 app.wxss。

实际结果

实际生成 app.css。

系统信息:

➜  [playground] node -v                
v18.12.0
➜  [playground] npm -v                                            
9.2.0
➜  [playground] yarn -v           
1.22.19

[ModyQyW]

// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import unocss from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni(), unocss()],
});

unocss 放在 uni 后面也是一样的。

[ModyQyW]

unocss/unocss#1999 (comment)

I looked at it but, couldn't find the source problem. Probably it's caused by unocss/unocss#1926. But I don't think it's something we have to fix.

I believe this could be fixed on uni-app side by just changing the priority of a plugin. If you can show them unocss/unocss#1926, they may know where the fix might be.

我看了看，但是，找不到源头问题。可能是由 unocss/unocss#1926 引起的。但我不认为这是我们必须要解决的问题。

我相信这可以通过改变一个插件的优先级在 uni-app 方面解决。如果你能给他们看 unocss/unocss#1926 ，他们可能知道修复的地方。

UnoCSS 方面认为这是一个应该在 @dcloudio/vite-plugin-uni 解决的问题。

[ModyQyW]

@StrivingRabbit @fxy060608 麻烦看一下，谢谢。

[zguolee]

补充：H5 正常，小程序会出问题

[ModyQyW]

APP 和 H5 理论上是正常的，因为支持使用 .css。但小程序基本都不支持 .css。

[zguolee]

APP 和 H5 理论上是正常的，因为支持使用 .css。但小程序基本都不支持 .css。

是的，但是小程序生成的css内容也是空的🙉

[StrivingRabbit]

暂时先用 0.46.x 吧，后续看看怎么优化一下

[ModyQyW]

看起来 3.0.0-alpha-3061620221230001 支持 unocss 0.47 和 0.48 了，可以试一下

[zguolee]

试了一下没有问题🥳

[mymx2]

试了一下没有问题🥳

cli命令行执行

npm run dev:mp-weixin

我这里还是报问题，但不确定是uno还是uni引发的，还是unocss-applet？。

[plugin:unocss:global:build:bundle] [unocss] does not found CSS placeholder in the generated chunks
This is likely an internal bug of unocss vite plugin

[zguolee]

试了一下没有问题🥳

cli命令行执行

npm run dev:mp-weixin

我这里还是报问题，但不确定是uno还是uni引发的，还是unocss-applet？。

[plugin:unocss:global:build:bundle] [unocss] does not found CSS placeholder in the generated chunks
This is likely an internal bug of unocss vite plugin

可以提供一个复现仓库吗？

[mymx2]

已经知道问题了

import 'uno.css'

语句，必须在main.ts主入口引入，在其他ts文件中引入就会引发这个错误。

[ModyQyW]

我自己测试了一下，是能生成正确后缀的样式文件的。其它问题请自行开 issue 反馈吧。

[zhetengbiji]

你们都说可以，为什么我依然不行？uniapp已经升级到最新的alpha版本了

"@dcloudio/uni-automator": "3.0.0-alpha-3061620230109001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-3061620230109001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-3061620230109001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-3061620230109001",

"unocss": "^0.48.3"

unocss无论版本设置0.47还是0.48都不行。必须0.47以下的版本才可以！

还未正式发布，CLI 创建的项目可以临时使用 3.0.0-alpha-3061620230106001