-
Notifications
You must be signed in to change notification settings - Fork 319
Unable to use inline CSS after switching to mini-css-extract-plugin #238
Comments
Same problem here. I saw that styled-jsx v3 allows for importing css files and use them inine but this version is not shipped with next@6. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Does not work for me, it tries to copy css from ./_next/ but instead the css is inside ./out/_next/ |
This is a great solution! |
It works for me in v7 https://github.com/badpenguin/nextjs-static-generator-boilerplate |
This comment has been minimized.
This comment has been minimized.
@HimanJusta I tried to replicate your error (I don't use Zeit Now) but it works fine. https://himanjusta-issue-238-comment.arianon.now.sh/ Thought that file path in the error does seem weird to me, shouldn't the path be |
Im facing this issue when i deploy to Zeit now, if I just use npm start and see the prod build on localhost it works. Regarding the error in file path I did notice that, but looks like zeit now uploads the next build to _next below is the snapshot of the final folder stucture in now Not sure if I need to add anything in now.json or not |
@HimanJusta same issue for me, too. Have you had any luck? |
that won't work if your server load your css files from an external source like s3 |
A got a notification from github and was surprised to discover that this was my issue 😅 Nearly two years since creating it, I can say that I’ve solved this problem for myself by using Thus, in my recent apps, all styles come from That said, I think it's worth keeping the issue open because it is still not possible to inline 'classic' global css in Next. Just sharing this update to help folks who can use the same trick as me 🙌 FYI: css is now a bult-in feature, no plugin is necessary: https://nextjs.org/docs/basic-features/built-in-css-support |
@kachkaev yes, it's built-in, but it doesn't inline it on the page and I ended up here from googling on how to do it :) I'm using a import '../styles/all.scss'; I simply have an old fashioned global SCSS-file - Ideally I would just embed it in a Edit: posted question here |
The solution in #238 (comment) still works well today (Next.js 9.5, July 2020). It gives a warning, though I don't think it'd cause any impact:
|
On
You should now get this two variables from - const { assetPrefix, files } = this.context._documentProps
+ const { assetPrefix, files } = this.context |
In v9.5.3, This minor change did seem to fix it for me (YMMV). I'm still getting my feet wet with Next so maybe someone with a little more experience can chime in to see if this is an appropriate fix? __getInlineStyles() {
- const { assetPrefix, files } = this.context;
+ const { assetPrefix, buildManifest } = this.context;
- if (!files || files.length === 0) return null;
+ if (!buildManifest.pages || buildManifest.pages.length === 0) return null;
- return files.filter((file) => /\.css$/.test(file)).map((file) => (
+ const pageKeys = [];
+ for (const key of Object.keys(buildManifest.pages)) {
+ if (buildManifest.pages[key]) {
+ pageKeys.push(buildManifest.pages[key]);
+ }
+ }
+ const mergeDedupeFiles = (arr) => {
+ return [ ...new Set([].concat(...arr)) ];
+ };
+
+ return mergeDedupeFiles(pageKeys).filter((file) => /\.css$/.test(file)).map((file) => (
<style
key={file}
nonce={this.props.nonce} My updated __getInlineStyles function __getInlineStyles() {
const { assetPrefix, buildManifest } = this.context;
if (!buildManifest.pages || buildManifest.pages.length === 0) return null;
const pageKeys = [];
for (const key of Object.keys(buildManifest.pages)) {
if (buildManifest.pages[key]) {
pageKeys.push(buildManifest.pages[key]);
}
}
const mergeDedupeFiles = (arr) => {
return [ ...new Set([].concat(...arr)) ];
};
return mergeDedupeFiles(pageKeys).filter((file) => /\.css$/.test(file)).map((file) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8')
}}
/>
));
} Hope this helps someone! |
In 9.5.3, getCssLinks({ allFiles }) {
return allFiles
.filter((file) => file.endsWith('.css'))
.map((file) => (
<style
key={file}
nonce={this.props.nonce}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join('.next', file), 'utf-8'),
}}
/>
));
} |
@jsiddiqui How do I do it in TypeScript? When I click on getCssLinks(files: DocumentFiles): JSX.Element[] | null; And declare type DocumentFiles = {
sharedFiles: readonly string[];
pageFiles: readonly string[];
allFiles: readonly string[];
}; Right now, I'm using getCssLinks({ allFiles }: { allFiles: any }) {
const { assetPrefix } = this.context
if (!allFiles || allFiles.length === 0) return null
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
}}
/>
))
} But why not export getCssLinks({ allFiles }: DocumentFiles) {
...
} |
@deadcoder0904 Specifying a type here is unnecessary as Typescript is able to infer the correct type due to extending the base class. For example if you do this:
I get the following Typescript error:
Therefore, I think that there is no need to export this. |
Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as zeit/next-css and zeit/next-sass have been deprecated in favor of the built-in support. |
Since recently (#228), it is no longer necessary to add
<link rel="stylesheet" href="/_next/static/style.css" />
to_document.js
because<link rel="stylesheet" href="/_next/static/css/styles.HASH.chunk.css"/>
is appended automatically. This is easy for developers, but comes at a cost for users. In my case, it blocks rendering by ≈1 second and shows the following warning in the lighthouse report:See original discovery of this performance issue in #11 (comment).
It'd be great to be able to use
<style>...inline...</style>
instead of<link rel="stylesheet" />
(perhaps, as an opt-in). This approach would be especially useful in a project withstyled-components
, where pretty much anything except normalize.css and a couple of global CSS rules is added to the body of a page by that library. How could we use inline styles in_document.js
?The text was updated successfully, but these errors were encountered: