Allow importing global CSS inside of the pages/ directory, not just _app

[Timer]

Next.js is now intelligent enough to know how to add and remove CSS files, so it should be safe to allow global CSS to be imported at the page-level.

n.b. This is only possible now that we add/remove CSS on route transitions. Let's make sure we want to keep this behavior going forward.

---

We have to consider how this adversely affects things like page-to-page transitions, etc.

[klapec]

Any updates? I have a use case for this - I’m currently maintaining a large e-commerce app that consists of many different pages and each page imports a separate *.scss file. These page-specific files import *.scss files of the components that are used within a page.

The app currently uses next-sass package but I’d love to get rid of that dependency (and unlock webpack@5 as the upgrade is currently blocked because of this).

Sure, I could migrate to (S)CSS Modules but it’d take so much time to do so… it wouldn’t be such a problem if I could incrementally migrate to (S)CSS modules (like with TypeScript), seems like it’s not possible - it’s either “use next-sass” or “load all of the styles as a single import statement within the _app.js (which would increase the styles weight heavily) and then slowly migrate to CSS Modules/any other css-in-js solution”.

[timneutkens]

Opened a RFC for this: #27953

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.