Как лучше всего включить CSS-файлы для компонентов Prime React при использовании Parceljs?

Question

Я использую Parceljs ( https://github.com/parcel-bundler/parcel) и React в своем приложении. Я решил использовать компоненты Prime React, так как они выглядят довольно прочными и хорошо сложенными. Я успешно установил Prime React с npm и, конечно, все файлы js и css находятся в папке node_modules/primereact. Также все CSS-файлы (включая CSS-файлы для всех бесплатных тем) находятся в папке node_modules/primereact/resources.

В документации по Prime React они упоминают только то, какие файлы CSS необходимы для работы компонентов Prime React, и есть пример того, как импортировать файлы CSS, если вы используете webpack.

Это ссылка на часть документации "Начало работы" для компонентов Prime React:

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

Согласно документации. Если я использую webpack, я могу просто импортировать css файлы с помощью команды import, например:

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

Но как лучше импортировать CSS-файлы, если я использую Parceljs Bundler?

Очевидно, что я могу просто скопировать CSS-файлы из папки node_modules/primereact/resources в папку своего приложения и просто импортировать CSS-файлы, как правило, по ссылке:

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

но таким образом я не могу просто обновить Prime реагировать с Npm и получать последние файлы.

Как лучше всего решить эту проблему?

Answer 1

Ответ на этот вопрос заключается в том, что я не понял, что Parcel также будет просматривать папку node_modules при использовании команды import. Так согласно документации посылки:

https://parceljs.org/css.html

Вы можете импортировать css файлы командой import:

import './index.css';

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

Но это также означает, что команда import будет искать в папке node_modules, если этот файл не найден в папке приложения. Поэтому я успешно импортировал файлы Prime React css с этими командами в мой файл MainApp.js:

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

Что на самом деле так же, как вы бы с Webpack.