Next.js 13中如何将外部CSS转换为内联样式？

针对Next.js 13（尤其是App Router）的场景，以下是几个可行的思路和实现方式：

1. 根布局内联全局CSS（Server Components方式） #

Next.js 13的App Router中，根布局（app/layout.tsx）默认是Server Component，可以直接使用Node.js的文件系统API读取全局CSS文件内容，然后注入到<style>标签中：

import fs from 'fs';
import path from 'path';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 读取全局CSS文件，路径根据你的实际项目结构调整
  const globalCss = fs.readFileSync(path.join(process.cwd(), 'app/globals.css'), 'utf8');
  
  return (
    <html lang="zh-CN">
      <head>
        {/* 内联全局样式 */}
        <style dangerouslySetInnerHTML={{ __html: globalCss }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

注意：该方式仅适用于Server Component（不要添加'use client'指令），因为Server Components运行在服务器端，可以直接访问文件系统。

2. 组件级CSS模块内联（Client Components方式） #

如果需要内联组件级的CSS模块，可以通过配置webpack的raw loader读取CSS模块的原始内容，再在组件内注入：

第一步：配置next.config.js #

添加raw loader支持，让Webpack可以直接读取CSS模块的原始文本：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.module\.css$/,
      resourceQuery: /raw/, // 通过?raw后缀触发该规则
      type: 'asset/source',
    });
    return config;
  },
};

module.exports = nextConfig;

第二步：在组件中使用 #

'use client';
// 通过?raw后缀读取CSS模块的原始内容
import componentCss from './MyComponent.module.css?raw';

export default function MyComponent() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: componentCss }} />
      <div className="your-component-class">组件内容</div>
    </>
  );
}

注意：CSS模块编译后的类名是哈希化的，确保组件中使用的类名和CSS模块中的类名一致（可以通过import styles from './MyComponent.module.css'获取哈希类名，再结合原始CSS内容使用）。

3. 排查之前方案失败的原因 #

• critters/html-inline-css-webpack-plugin：这两个插件主要适配Next.js 12及之前的Pages Router，Next.js 13 App Router的构建产物结构、Webpack编译流程有变化，插件未针对此适配，若要使用需要自定义Webpack配置的编译钩子，成本较高。
• _document文件：Next.js 13 App Router已废弃pages/_document.tsx，相关逻辑需要迁移到app/layout.tsx中实现。

内容的提问来源于stack exchange，提问作者Saroj Bhattarai