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

Posted 2023-02-22

【中文标题】使用 Parceljs 时，为 Prime React 组件包含 css 文件的最佳方法是啥？

【英文标题】：What is the best way to include css files for Prime React components when using Parceljs?使用 Parceljs 时，为 Prime React 组件包含 css 文件的最佳方法是什么？

【发布时间】：2019-06-10 13:02:05

【问题描述】：

我在我的应用程序中使用 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 文件才能工作，并且如果您使用的是 webpack，还有如何导入 css 文件的示例。

这是 Prime React 组件的“入门”文档部分的链接：

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

根据文档，如果我使用 webpack，我可以使用如下 import 命令导入 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 文件夹复制到我的应用程序文件夹，然后通过链接正常导入 css 文件：

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

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

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

【参考方案1】：

这个问题的答案是我不明白 Parcel 在使用 import 命令时也会查看 node_modules 文件夹。所以根据包裹文档：

https://parceljs.org/css.html

您可以使用 import 命令导入 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 相同。