Nuxt•13mo ago

Prevent CSS minify / parsing?

Hi folks

When Nuxt (Vite? Nitro?) parses and compresses my CSS—which makes heavy use of nesting, including nested

@container

@container

queries—it gets very confused and incorrectly groups some selectors together, sharing commands between them that should not be shared. (It all works fine in

dev

dev

, but

prod

prod

is where the less-than-smart minification kicks in.) I’ve tried so many flags in

nuxt.config.ts

nuxt.config.ts

to prevent this, but nothing actually works. Anyone know the magic trick to keep Nuxt’s damn hand off my CSS?

Node  18.17.0
Nuxt  3.8.0-28284309.b3d3d7f4
Nitro 2.7.0-28295243.3e9302a

Node  18.17.0
Nuxt  3.8.0-28284309.b3d3d7f4
Nitro 2.7.0-28295243.3e9302a

kapa.ai•12/15/24, 2:23 PM

Hi @Stewart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•12/15/24, 2:24 PM

----------------------
To address your issue with CSS minification and parsing in Nuxt 3 production builds, there are a few approaches you can try. Based on the knowledge sources provided, here are some potential solutions:

Disable CSS optimization:

You can try disabling CSS optimization in your

nuxt.config.ts

nuxt.config.ts

file. According to the Nuxt Configuration documentation (https://nuxt.com/docs/api/nuxt-config#optimizecss), you can set the option to :

Configure PostCSS:

Nuxt comes with PostCSS built-in, and you can configure it in your

nuxt.config.ts

nuxt.config.ts

file. You might want to adjust the PostCSS plugins or their options to prevent unwanted transformations. As mentioned in the Nuxt documentation on styling (https://nuxt.com/docs/getting-started/styling#using-postcss), you can configure PostCSS like this:

Disable specific PostCSS plugins:

If you suspect that certain PostCSS plugins are causing issues, you can try disabling them. For example, you might want to disable , which is responsible for minification. According to the Nuxt Configuration documentation (https://nuxt.com/docs/api/nuxt-config#postcss), you can configure options or potentially disable it:

Use the feature:

kapa.ai•12/15/24, 2:24 PM

Nuxt 3 offers an feature that might help preserve your CSS structure. As mentioned in the Nuxt Features documentation (https://nuxt.com/docs/guide/going-further/features), you can enable this feature in your

nuxt.config.ts

nuxt.config.ts

Keep in mind that this feature is currently only available when using Vite.

If none of these solutions work, you might need to investigate further or consider reporting this as a potential bug to the Nuxt team. As suggested in the Nuxt documentation on reporting bugs (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug), you can search through open issues or create a new one if necessary.

Remember to test each solution carefully in both development and production environments to ensure it resolves your specific issue with nested selectors and

@container

@container

queries.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/15/24, 2:24 PM

@572587462568968192 Kapa.ai is still learning and improving, please let me know how I did by reacting below.