默认情况下，NextJS将在开发中插入<style>标签(可能使用style-loader)。
在生产模式下，NextJS将提取css块，并将其作为单独的css文件从_next/static目录下提供。我在默认情况下调试了webpack配置NextJS服务，并注意到它使用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;
您可以使用next/head来附加<head>。
https://nextjs.org/docs/api-reference/next/head
By the way;内联样式可以理解为<div style=".." />，我想你是在问头部内的样式标签;避免混淆;你可以编辑你的文章来澄清这一点。