How to import .css file on a per page/component basis?

[chhuang]

I understand that we can import global CSS in _app and the built-in CSS module support.

But neither of these approaches solve my problem: I'm using a third party image gallery and it requires to import a .css file, but it's not good practice to import it in _app because the gallery is only used on one page. What's the best way to import it just for that page?

Related to #10665

[waptik]

Did you try this in your components or pages: eg:
import 'PATH_TO_CSS_LOCATION/styles.css' ?

[chhuang]

Yes I did:

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.

[waptik]

I don't know your configuration or nextjs version but I think this might help.
https://github.com/opencollective/opencollective-frontend/blob/dd6213172bf88272c3013b32da8ef1456bd6ba50/pages/marketingPage.js
Go through their configuration and see how you can solve your issue

[chhuang]

Thanks for the link, I'll definitely try that. I'm using next@latest.

[waptik]

Hey! You can check this out https://github.com/zeit/next.js/discussions/10849#discussioncomment-1022 @chhuang

[chhuang]

Thanks but this wouldn't work for my use case because it applies the CSS on a per class basis, which is good for adding component level CSS. What I really want to do is slightly different, which is adding/importing a global predefined CSS file within a component.

[gragland]

If you use the next-css plugin then it should disable their new CSS import rules.

[jasonwilliams]

The next-css plugin shouldn't be described as legacy until the built-in css has parity with its feature set.
In this case its not possible to import css on a page-by page basis, so i'm sure many of us will need to continue using next-css.

Should there be a warning in the terminal whilst this is still the case?
Calling it legacy signals that we should be moving to the built-in solution but that's misleading as its not a direct replacement to next-css.