2

我在我的应用程序中使用 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 并获取最新文件。

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

4

1 回答 1

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 相同。

于 2019-01-16T13:24:44.967 回答