如何将 primevue css 文件添加到 JHipster 项目

我正在尝试使用 vue.js 应用程序将 primevue 添加到我的 jhister 中。我正在遵循这些步骤。

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 应用程序集成。 感谢您的帮助！！！

我对 Vue 不太有经验，但是官方文档 https://www.primefaces.org/primevue/#/setup示例直接导入 CSS 文件。我检查了primevue-快速入门 https://github.com/primefaces/primevue-quickstart并以这种方式成功集成了两个库。

1. 安装primevue and 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 https://primefaces.org/primevue/#/组件在全球范围内可用。或者将它们添加到[component-name].component.ts (e.g. home.component.ts）如果您只想使它们在特定视图中可用。

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

4. 在您​​的视图中使用PrimeVue组件

打开你的[component-name].vue (e.g. home.vue) 文件并通过添加 HTML 标记开始使用 UI 组件。我导入了Button组件所以在我的例子中它是这样的：

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

我很确定我们应该能够按照您首先尝试的方式使用这两个库，但我无法让它以任何其他方式工作。