如何在NextJS项目的头标签中内联CSS？
如何在NextJS项目的头标签中内联CSS？
提问于 2019-07-16 21:05:16
我的NextJS项目具有以下Webpack配置：
import path from 'path';
import glob from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
import dotenv from 'dotenv';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import withSass from '@zeit/next-sass';
dotenv.config();
module.exports = withSass({
distDir: '.build',
webpack: (config, { dev, isServer }) => {
if (isServer) {
return config;
}
config.plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
);
config.optimization.minimizer.push(
new OptimizeCSSAssetsPlugin({}),
);
return config;
},
});这允许我在任何页面中导入任意数量的scss文件，并将它们捆绑在一起，缩小为单个文件，并提供如下服务：
但是，我更喜欢将样式定义内联到我的标记中，而不是。有没有可能不堆积成吨的第三方模块？
如果不是，是否有可能至少更改生成的
至
来自
还可以添加add和add
对它？
回答 2
Stack Overflow用户
发布于 2019-07-18 17:40:42
我成功地内联了我的CSS，方法是稍微调整一下
文件。我扩展了本机提供的组件
NextJS
并将其添加到我的自定义文档标记中。以下是我所做修改的部分表示：
import { readFileSync } from 'fs';
import { join } from 'path';
class InlineStylesHead extends Head {
getCssLinks() {
return this.__getInlineStyles();
}
__getInlineStyles() {
const { assetPrefix, files } = this.context._documentProps;
if (!files || files.length === 0) return null;
return files.filter(file => /\.css$/.test(file)).map(file => (
));
}
}
class MyDocument extends Document {
render() {
return (
);
}
}
I owe this solution to https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871.Stack Overflow用户
发布于 2021-03-02 06:15:15
对于NextJS 9.5.0+，只需使用以下代码：
import Document, {
Main,
NextScript,
Head,
Html
} from 'next/document'
import {readFileSync} from "fs"
import {join} from "path"
class InlineStylesHead extends Head {
getCssLinks(files) {
const {
assetPrefix,
devOnlyCacheBusterQueryString,
dynamicImports,
} = this.context
const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
const sharedFiles = new Set(files.sharedFiles)
// Unmanaged files are CSS files that will be handled directly by the
// webpack runtime (`mini-css-extract-plugin`).
let dynamicCssFiles = dedupe(
dynamicImports.filter((f) => f.file.endsWith('.css'))
).map((f) => f.file)
if (dynamicCssFiles.length) {
const existing = new Set(cssFiles)
dynamicCssFiles = dynamicCssFiles.filter(
(f) => !(existing.has(f) || sharedFiles.has(f))
)
cssFiles.push(...dynamicCssFiles)
}
let cssLinkElements = []
cssFiles.forEach((file) => {
if (!process.env.__NEXT_OPTIMIZE_CSS) {
cssLinkElements.push(
)
}
cssLinkElements.push(
)
})
if (
process.env.NODE_ENV !== 'development' &&
process.env.__NEXT_OPTIMIZE_FONTS
) {
cssLinkElements = this.makeStylesheetInert(
cssLinkElements
)
}
return cssLinkElements.length === 0 ? null : cssLinkElements
}
}
function dedupe(bundles) {
const files = new Set()
const kept = []
for (const bundle of bundles) {
if (files.has(bundle.file)) continue
files.add(bundle.file)
kept.push(bundle)
}
return kept
}
export default class MyDocument extends Document {
render() {
return (
<Html lang="ru" dir="ltr">
<InlineStylesHead/>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
</code></pre>
</code></pre>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57057947
复制相关文章
相似问题
腾讯云开发者
