如何在 NextJs 中获取 CSS 文件的托管 URL

【问题标题】：How to get hosting URL of a CSS file in NextJs如何在 NextJs 中获取 CSS 文件的托管 URL
【发布时间】：2021-12-30 11:03:09
【问题描述】：

我需要托管一个 CSS 文件并将其加载到页面上的 iFrame。我在 Preact 项目中成功使用了file-loader。但是当我在 NextJs 中使用它时，它不起作用。它没有给出任何错误。实际上，它给出了 CSS 文件的相对路径，但是当我尝试通过附加主机来打开 URL 时。 NextJs 返回 404。

以下是核心代码：

import globalCssUrl from '!!file-loader!../styles/globals.css'

function MyApp({ Component, pageProps }) {
  // !!! /_next/f13a8c0924aa251b14eabf89c510c544.css
  // but http://localhost:300/_next/f13a8c0924aa251b14eabf89c510c544.css gives 404
  console.log(globalCssUrl)

  return <Component {...pageProps} />
}

export default MyApp

我还在这里创建了一个示例项目：https://github.com/ZenUml/next-app-get-hosting-url-of-a-file

PS。为什么不把它公之于众？
在这个演示中，它是一个本地 CSS 文件。在我的真实用例中，它是来自 node_module 的 CSS 文件。我需要使用包管理来管理它。

【问题讨论】：

标签： next.js webpack-file-loader

【解决方案1】：

我真的不明白你要做什么。

您的项目中有/public 文件夹，用于显示目的。因此，您可以将您的.css file 放在/public 目录中，并从外部路径访问它。

假设您已经创建了/public/css/myCSS.css 文件。

在您的 _app.js 中，您可以将此 CSS 添加到您的项目 import "../public/css/myCSS.css"; 中，您可以从 {yourWebsite}/css/myCSS.css 访问它

附：如果它是来自package 的css，则创建一个页面，在变量中从package 导入css file 并在您创建的页面上显示此css。更多here

【讨论】：