как добавить файлы primevue css в проект JHipster

Question

Я пытаюсь добавить primevue в свой jhister с помощью приложения vue.js. И я следую этим шагам.

1- запустите эти комментарии

npm install primevue --save
npm install primeicons --save

2- добавить их в мой vendor.scss

@import '~primevue/resources/primevue.min.css';
@import '~primevue/resources/themes/nova-light/theme.css';
@import '~primeicons/primeicons.css';

3- когда я запускаю команду npm start. Я получаю эту ошибку.

ERROR in ./src/main/webapp/content/scss/vendor.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./
node_modules/sass-loader/lib/loader.js??ref--9-3!./src/main/webapp/content/scss/vendor.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/primevue/resources/primevue.min.css'
  in [
    C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\src\main\webapp\content\scss
  ]
    at resolveModule.catch.catch (C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\node_modules\postcss-import\lib\resolve-id.js:35:13)
 @ ./src/main/webapp/content/scss/vendor.scss 4:14-231 14:3-18:5 15:22-239
 @ ./src/main/webapp/app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9060 ./src/main/webapp/app/main.ts

как я могу интегрировать Primevue с моим приложением jhipster. Спасибо за помощь!!!

Answer 1

Я не очень разбираюсь в Vue, но официальные примеры документации импортируют файлы CSS напрямую. Я проверил primevue-quickstart и таким образом успешно интегрировал обе библиотеки.

1. Установить primevue а также primeicons

Откройте терминал и выполните следующую команду, если вы используете npm:

npm i primevue primeicons

Или следующее, если вы используете пряжу:

yarn add primevue primeicons

2. Добавьте необходимые файлы CSS.

Откройте свой main.ts файл и добавьте следующие строки вверху:

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

3. Импортируйте компоненты, которые хотите использовать.

Вы можете добавить следующие строки кода в свой main.tsфайл, если вы хотите, чтобы все компоненты PrimeVue были доступны глобально. Или добавьте их в[component-name].component.ts (например home.component.ts), если вы хотите сделать их доступными только в определенном виде.

import Button from 'primevue/button';
Vue.component('Button', Button);

4. Используйте компонент PrimeVue в своем представлении.

Откройте свой [component-name].vue (например home.vue) и начните использовать компонент пользовательского интерфейса, добавив разметку HTML. Я импортировалButton компонент, поэтому в моем случае это примерно так:

<Button label="Click" icon="pi pi-check" />

Я почти уверен, что мы сможем использовать обе библиотеки так, как вы пытались сначала, но я не мог заставить их работать по-другому.