如何让 NextJS 在生产中将样式注入头部？答案

【问题标题】：How to make NextJS inject styles into head in production?如何让 NextJS 在生产中将样式注入头部？
【发布时间】：2022-10-22 06:45:56
【问题描述】：

默认情况下，NextJS 会在开发中将 <style> 标签内联注入 head 中（可能在后台使用 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;

【问题讨论】：

这是否回答了您的问题：How to inline CSS in the head tag of a NextJS project?？

标签： javascript reactjs webpack next.js

【解决方案1】：

您可以使用 next/head 附加<head>。

https://nextjs.org/docs/api-reference/next/head

顺便一提; inline-styles 可以理解为<div style=".." /> 我想你是在问head里面的style标签；避免混淆；您可以编辑您的帖子以澄清这一点。

【讨论】：

知道 NextJS 是否允许我们实际做在线样式吗？我得到它来为我生成我的电子邮件模板。我想拥有真正的内联样式作为'style =“*”'，而不是从'<head>'而不是从文件中加载。这是为了最大限度地提高电子邮件客户端的兼容性。