Next.js 13 中无法将 global.css 文件导入到根布局答案

【问题标题】：Unable to import the global.css file to the root layout in Next.js 13Next.js 13 中无法将 global.css 文件导入到根布局
【发布时间】：2022-11-12 03:17:57
【问题描述】：

伙计们，我是 Next.js 13 的新手。

我使用 Next.js 13 创建了一个项目，并使用了新的 app 目录。

我正在尝试使用 Tailwind CSS 应用样式。我遵循了下面的 Next.js 文档：

https://beta.nextjs.org/docs/styling/tailwind-css

文档说将 global.css 样式表导入根布局 (app/layout.js)，以便将样式应用于应用程序中的每个路由。我尝试按照此步骤操作，但出现以下错误：

这是我的文件夹结构：

这是我的代码sn-ps：

应用程序/layout.js

import React from "react";
import Link from "next/link";
import "../styles/global.css";

const Layout = ({ children }) => {
  return (
    <>
      <nav className="w-full h-20 bg-white border-b border-gray-300">
        <ul className="w-40 h-20 p-4 flex justify-between items-center list-none">
          <li>
            <Link href="/blog">Blog</Link>
          </li>
          <li>
            <Link href="/projects">Projects</Link>
          </li>
          <li>
            <Link href="/books">Books</Link>
          </li>
        </ul>
      </nav>

      <main>{children}</main>
    </>
  );
};

export default Layout;

样式/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

我究竟做错了什么？

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

import "./styles/global.css";

这应该有效。你有 1 到多个点

【讨论】：