在Deno Fresh中配置全局CSS：如何全局引入样式表？

针对你遇到的问题，这里提供三种能让所有路由都加载到样式表的方法：

方法1：在_app.js/_app.tsx中使用<Head />组件 #

_app.js是Next.js所有页面的入口组件，所有路由都会加载这个文件的内容，把<Head />放在这里就能实现全局生效：

import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel='stylesheet' href="/main.css" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

方法2：直接在_app.js/_app.tsx中导入CSS文件 #

Next.js允许在_app.js里直接导入全局CSS，这是最简单的方式，框架会自动处理打包和全局注入：

// 路径根据你的main.css实际位置调整，比如放在styles文件夹下就用../styles/main.css
import '../styles/main.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

方法3：在自定义_document.js/_document.tsx中添加样式表 #

如果需要更底层地控制HTML结构，可以自定义_document.js，在这里添加的<link>标签会作用于所有页面：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel='stylesheet' href="/main.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

推荐优先使用方法2，步骤最少且Next.js会自动完成样式优化处理。

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