使用 Parceljs 时，为 Prime React 组件包含 css 文件的最佳方法是什么？

Question

我在我的应用程序中使用 Parceljs (https://github.com/parcel-bundler/parcel) 和 React。我决定使用 Prime React 组件，因为它们接缝非常牢固且构造精良。我已经使用 npm 成功安装了 Prime React，当然所有 js 和 css 文件都位于 node_modules/primereact 文件夹中。此外，所有 css 文件（包括所有免费主题的 css 文件）都在 node_modules/primereact/resources 文件夹中。

在 Prime React 文档中，他们只提到了 Prime React 组件能够工作所需的 css 文件，并且有关于如何导入 css 文件的示例，如果你是使用 webpack。

这是 Prime React 组件的 "Get Started" 文档部分的 link：

https://www.primefaces.org/primereact/#/setup

根据文档，如果我使用的是 webpack，我可以使用这样的导入命令导入 css 文件：

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

但是，如果我使用 Parceljs Bundler，导入 css 文件的最佳方式是什么？

显然，我可以将 css 文件从 node_modules/primereact/resources 文件夹复制到我的应用程序文件夹，然后使用 link:[=15 正常导入 css 文件=]

<link rel="stylesheet" type="text/css" href="mystyle.css">

但那样我就不能只用 npm 更新 prime react 并获取最新文件。

解决这个问题的最佳方法是什么？

Answer 1

这个问题的答案是我不明白 Parcel 在使用导入命令时也会查看 node_modules 文件夹。因此，根据 Parcel 文档：

https://parceljs.org/css.html

您可以使用导入命令导入 css 个文件：

import './index.css';

<link rel="stylesheet" type="text/css" href="index.css">

但这也意味着如果在应用程序文件夹中找不到该文件，导入命令将查看 node_modules 文件夹。所以我已经在我的 MainApp.js 文件中使用这些命令成功导入了 Prime React css 文件：

import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

这实际上与使用 Webpack 时相同。

使用 Parceljs 时，为 Prime React 组件包含 css 文件的最佳方法是什么？

What is the best way to include css files for Prime React components when using Parceljs?

javascript

css

reactjs

parceljs

primereact