我的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文件,并将它们捆绑在一起,缩小为单个文件,并提供服务:
<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">
但是,我更喜欢将样式定义作为<style></style>
内联到我的<head>
标记中,而不是<link>
。有没有可能不堆积大量的第三方模块?
如果没有,是否可以至少将结果<link>
的rel
从stylesheet
更改为preload
,并向其添加add as="style" crossorigin
?
3条答案
按热度按时间o2rvlv0m1#
我通过稍微调整
pages/_document.jsx
文件成功地内联了我的CSS。我扩展了NextJS原生提供的<Head>
组件,并将其添加到自定义文档标记中。以下是我修改的部分表示:我把这个解决方案归功于https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871。
k4aesqcs2#
Next.js现在可以自动内联Critical CSS
功能是实验性的,背后的旗帜,但我们很乐意听到你的反馈:
1.将
experimental: { optimizeCss: true }
添加到next.config.js1.安装critters@0.0.7作为依赖项
就是这样!
参考:https://twitter.com/hdjirdeh/status/1369709676271726599
au9on6nz3#
对于NextJS 9.5.0+,只需使用以下代码: