Nuxt 3: Change import order/inject position

[nicklassandell]

Tailwind has an option for injectPosition which seems to be what I'm looking for: https://tailwindcss.nuxtjs.org/getting-started/options#injectposition Is there something similar in unocss, or a better solution?

Currently we have our CSS imported in nuxt.config like this:

    css: [
        "@unocss/reset/tailwind.css",
        "~/assets/scss/base.scss",
    ],

and of course we have the @unocss/nuxt module installed. This works, but it places our CSS at the bottom (giving it the highest selector priority). The unocss utilities should always come last so it has the highest prio. Is there a way to accomplish this?

I saw the layers config in the docs, which might be helpful, but I'm not sure how to configure a layer for our css. We're also using SCSS and i'm not sure it's possible to import? https://unocss.dev/config/layers#ordering

[zyyv]

I am willing to align this option, thanks for your feedback.

[domsen123]

do you have any news on this? :)

or -

@nicklassandell - did you find a solution/workaround for this?

[nisansei]

No news from my side, but would also love an update. The project I need it for is going live in June, I'm hoping it can be sorted until then.

[zyyv]

Yes, I once had a PR that was updated and my simple attempt broke the original behavior beyond my expectations. If you can fix it, please PR and thanks for it.
#3448
Revert it in #3482

[nisansei]

Thanks for the update! Can you provide any further details on why it didn't work? I might have a crack at it over the weekend, but I've never touched uno internals so more info about the issue would be very helpful.

[leosin]

In nuxt I found a temporary solution, disable unocss autoimport.

nuxt.config.ts

css: [
    'assets/styles/reset.scss',
    'assets/styles/screen.scss',
    'uno:preflights.css',
    'assets/styles/main.scss',
    'assets/styles/prose.scss',
    'assets/styles/blocks.scss',
    'uno.css',
    'uno:default.css',
  ],
unocss: {
    autoImport: false,
  },

unocss.config.ts

export default defineConfig({
outputToCssLayers: true,
})

I don't know if there is any other better way