如何在生产中使NextJS注入样式到头部?

myzjeezk  于 2022-10-22  发布在  Java
关注(0)|答案(1)|浏览(207)

默认情况下,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;
csga3l58

csga3l581#

您可以使用next/head来追加<head>
https://nextjs.org/docs/api-reference/next/head
顺便说一句内联样式可以理解为<div style=".." />,我想你是在问head中的样式标签;避免混淆;你可以编辑你的帖子来澄清这一点。

相关问题