Closed achrinza closed 9 months ago
I have the same problem with TailwindCSS setup. I use the Hybrid AMP. Adding inline style style={{ background: '#000'}}
on div works though.
My NextJS version: 9.2.2
Wow, I've been trying to figure this one out for hours, thanks. I'll see if I can find the error and work on it and eventually do a PR
EDIT: I'm assuming this isn't solved yet, even in unstable versions, right? Also, if someone could point me to the right place, as a start, that would be awesome.
It has to be somewhere in this file https://github.com/zeit/next.js/blob/canary/packages/next/next-server/server/render.tsx right?
Btw @achrinza as a temp fix, you can probably import your .css like this:
export default ({ Component, pageProps }) => <>
<Head>
<link rel="stylesheet" src="/styles.css" />
</Head>
<Component {...pageProps} />
</>
Assuming, ofc, you have the .css in the public dir. This, for some reason however, throws an Amp Validation error
[ warn ] Amp Validation
/ error The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/styles/global.css'. https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts
(This error happens even if the is the only child of
)This works fine afaik.
Also, this should point in the right direction. Why does importing with import
not work, while linking inside head does?
Maybe someone from the team can help.
@filipesmedeiros Thanks for the the workaround.
Unfortunately (based on the error), this won't generate a valid AMP page which would prevent the AMP Cache from caching the web page. It'll also breaking some CI/CD pipelines that run the AMP validator.
So unfortunately it’s a no-no for my projects
FWIW #8710 seems to be the PR that adds Global CSS
@achrinza True, this doesn't generate valid AMP. I think for now the easiest way then, to have AMP and a "global" style would be to just inline it in the
of the _app.js using styled jsx.So wait, this should be the cause right: webpack is not putting the imported stylesheets inside
Bug report
Describe the bug
Global CSS (via
_app.tsx
/_app.js
) are not being applied to AMP pages.Non-AMP pages do not have this issue.
To Reproduce
Reproduction sandbox: https://github.com/achrinza/issue-sandbox-nexjs-global-css-amp
Step-by-step:
npm init next-app
styles.css
Create
pages/_app.js
Create
pages/NonAmp.js
page:Create
pages/Amp.js
pagenpm run dev
localhost:3000/Amp
andlocalhost:3000/NonAmp
- observe the lack ofcolor: red
on the AMP page.Expected behavior
The AMP page should have a global CSS applied.
Screenshots
If applicable, add screenshots to help explain your problem.
System information
Additional context
N/A