如何使用next.js选择要导入的css文件？

Question

我现在正在尝试使用 next.js 选择要应用的 css 文件。

我有两个 css 文件，一个用于电脑，一个用于手机。

目前，我正在导入如下 css 文件：

// _app.tsx

import "../styles/globals.css";  // pc styling css
// import "../styles/globals_mobile.css";  // mobile styling css

function MyApp({ Component, pageProps }: AppProps) {
  // ... remaining code
}

现在我有了移动设备 css 样式文件，并且我有 isMobile 布尔变量，用于标识设备是来自 AppProps.

的 pc 还是移动设备

但我找不到如何动态导入 css 文件的方法。

以下是伪代码，实际上并没有起作用：

// _app.tsx

import pcStyling from "../styles/globals.css";  // it is NOT actually imported.
import mobileStyling from "../styles/globals_mobile.css";  // it is NOT actually imported.


function MyApp({ Component, pageProps }: AppProps) {
  if (pageProps.isMobile) apply mobileStyling;
  else apply pcStyling;

  // ...
}

有没有我可以选择的选项？

Answer 1

由于您的样式是静态的，您可以将它们放在 public 文件夹中。并在 <Head> 组件中向它们注入正确的 link。

这看起来应该类似于：

// _app.tsx
import Head from 'next/head';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href={`/styles/globals${pageProps.isMobile ? '_mobile' : ''}.css`} />
      </Head>
      {'rest of your components'}
    </>
  );
}

上面的代码假定在 public 文件夹中有 /styles/globals.css & /styles/globals_mobile.css 文件

如何使用next.js选择要导入的css文件？

How to choose what css file to be imported using next.js?

html

css

typescript

next.js