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

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

0 голосов
/ 16 января 2019

Я использую 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, если вы используете веб-пакет.

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

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

Согласно документации. Если я использую 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 и получать последние файлы.

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

1 Ответ

0 голосов
/ 16 января 2019

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

https://parceljs.org/css.html

Вы можете импортировать CSS-файлы с помощью команды импорта: 

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.

...