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

Question

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

我有两个css文件，一个用于PC，一个用于移动。

目前，我正在导入如下 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>组件中注入正确的链接。

这应该类似于：

// _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 文件？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-25 11:09:32

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-25 11:09:32

解决方案1
1 已采纳 2022-05-25 11:09:32