如何在 NextJS 项目的 head 标签中内联 CSS? [英] How to inline CSS in the head tag of a NextJS project?
问题描述
我的 NextJS 项目有以下 Webpack 配置:
My NextJS project has the following Webpack configuration:
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 文件,并将它们全部捆绑在一起,缩小为一个文件,然后提供:
This allows me to just import any number of scss files in any page and have them all bundled together, minified as a single file, and served thus:
<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">
然而,我更喜欢将样式定义内联到我的 <head>
标签中,而不是 ,作为
<;样式></style>
.是否可以不堆积大量第三方模块?
However, instead of <link>
, I'd very much prefer to have the style definitions inlined into my <head>
tag as <style></style>
. Is it possible without piling up a ton of third-party modules?
如果没有,是否至少可以将结果的
rel
从stylesheet更改为
preload
并添加 add as="style" crossorigin
到它?
If not, is it possible to at least change the resulting <link>
's rel
to preload
from stylesheet
and also add add as="style" crossorigin
to it?
推荐答案
通过稍微调整 pages/_document.jsx
文件,我成功地内联了我的 CSS.我扩展了 NextJS 原生提供的 组件,并将其添加到我的自定义文档标记中.这是我修改的部分表示:
I managed to successfully inline my CSS by slightly tweaking the pages/_document.jsx
file. I extended the <Head>
component natively provided with NextJS and added it to my custom document markup. Here's a partial representation of my modifications:
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 => (
<style
key={file}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: readFileSync(join(process.cwd(), '.build', file), 'utf-8'),
}}
/>
));
}
}
class MyDocument extends Document {
render() {
return (
<Html lang="en" dir="ltr">
<InlineStylesHead>
<meta name="theme-color" content="#ffcc66" />
</InlineStylesHead>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
我将此解决方案归功于 https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871.
I owe this solution to https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871.
这篇关于如何在 NextJS 项目的 head 标签中内联 CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!