默认情况下,NextJS将在开发中将<style>
标记内嵌到head中(可能在后台使用style-loader
)。
在生产模式下,NextJS将提取css块,并将其作为_next/static
目录中的单独css文件提供。我调试了默认情况下NextJS服务的webpack-config,并注意到它使用mini-css-extract-plugin
来实现这种行为。
问题是,为了满足我的需求,我还需要NextJS在生产中注入内联样式。实现这一目标的最简单方法是什么?
这是当前的next.config。我使用的js
const nextConfig = {
useFileSystemPublicRoutes: false,
poweredByHeader: false,
assetPrefix: '',
webpack(config) {
console.dir(config.module.rules, { depth: null, colors: true });
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
},
};
module.exports = nextConfig;
1条答案
按热度按时间csga3l581#
您可以使用next/head来追加
<head>
。https://nextjs.org/docs/api-reference/next/head升
顺便说一句内联样式可以理解为
<div style=".." />
,我想你是在问head中的样式标签;避免混淆;你可以编辑你的帖子来澄清这一点。