admin管理员组

文章数量:1320661

I'm using Next.js for my project and I want to have full control over the CSS that is injected into the page. Specifically, I want to manually inject two CSS files: one for Critical CSS and one for Uncritical CSS.

Next.js, by default, automatically generates and injects the CSS into the <head> of the HTML document (like 2cf20825bc789d13.css). However, I want to disable this automatic CSS injection and instead use my own manually generated files for critical and uncritical CSS.

I've tried modifying the next.config.js file to stop Next.js from automatically injecting the generated CSS into the section, but so far, I haven't been able to disable it.

How can I achieve this goal with the src/app structure? Any help on how to fully control the CSS injection process in Next.js would be greatly appreciated!

Backstory: I initially used the extract option of the npm package critical to extract critical CSS and manually inject it into my pages. However, I ran into an issue because I’m deploying the project on Netlify, which is serverless, and after the build, the platform cannot read the files. This results in the extracted critical CSS not being removed from the old CSS files, as it was already generated. As a result, the content of the critical CSS still remains in the original CSS file, which is also being loaded.

本文标签：

版权声明：本文标题：javascript - How to prevent Next.js from automatically injecting CSS stylesheets into the &lt;head&gt;? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742064728a2418765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。