What is the difference between import 'virtual:unocss' and import 'unocss'?

[cat394]

The installation page on the official ikun-ui website says import 'virtual:unocss', but I was able to get the same result by just writing import 'unocss'. What are the differences between these?

[vtrbo]

I think import 'virtual:unocss' is equivalent to import 'uno.css' for importing css styles, but import 'unocss' is equivalent to importing the unocss library.

[cat394]

Thank you for your reply. Sorry, I wrote something confusing. I wanted to know about the difference between import 'uno.css' and import 'virtual:unocss'. Your answer was helpful.

[baiwusanyu-c]

The results I get using import 'virtual:unocss' and import 'unocss' are different. The latter does not make the style effective.

[baiwusanyu-c]

Using vite-plugin-inspect to view the compiled code also verified @vtrbo's answer, the two are different

[baiwusanyu-c]

import 'virtual:unocss' will be treated as a virtual module by the unocss plug-in. For more details, please check the unocss source code.
https://github.com/unocss/unocss/blob/main/packages/shared-integration/src/layers.ts

[cat394]

Thank you for taking screenshots and explaining in detail!

[zyyv]

As baiwusanyu-c said, they are all virtual modules in the reslvoeId stage.

https://github.com/unocss/unocss/blob/bda907f15ed2ae0631dd493a3fe21f037f0ed114/packages/shared-integration/src/layers.ts#L1-L3

virtual: does not need to be captured in regular expressions.

https://github.com/unocss/unocss/blob/bda907f15ed2ae0631dd493a3fe21f037f0ed114/packages/shared-integration/src/layers.ts#L13-L20

In the resolve uno(:xxx)?.css stage, it mainly focuses on the analysis of unocss layer.
Refer to https://unocss.dev/config/layers#layers.