尝试导入模块时在PrimeNG中加载multiselect.css失败，例如MultiSelectModule

Question

我在浏览器中遇到错误

GET http://localhost:3000/multiselect.css 404 (Not Found)
Failed to load multiselect.css

当我试图在组件模块文件中导入MultiSelectModule时：

import { MultiSelectModule } from 'primeng/multiselect';
@NgModule({
...
    imports: [CommonModule, FormsModule, MultiSelectModule],
...

我已经在app.modules.ts中导入了其他模块，如：BrowserModule、BrowserAnimationsModule

在angular.json中，我有

"styles": [
     "node_modules/primeicons/primeicons.css",
     "node_modules/primeng/resources/themes/nova-light/theme.css",
     "node_modules/primeng/resources/primeng.min.css",

但是它不适用于我，所以我将这些样式导入到main.ts中

import 'primeng/resources/themes/saga-blue/theme.css';
import 'primeng/resources/primeng.min.css';
import 'primeicons/primeicons.css';

我的package.json

"dependencies": {
    "@angular/animations": "~12.2.6",
    "@angular/cdk": "12.2.12",
    "@angular/common": "~12.2.6",
    "@angular/compiler": "~12.2.6",
    "@angular/core": "12.2.6",
    "primeflex": "3.1.0",
    "primeicons": "5.0.0",
    "primeng": "12.2.2",
...

编译时没有错误。

当导入不太高级的元素时，比如p-button，我没有错误。

哪里会有问题呢？

Answer 1

临时解决方案所以我希望有人能找到更好的解决方案：

const CopyWebpackPlugin = require('copy-webpack-plugin');

const primeNgCss = [
    ['primeng/resources/components/multiselect/multiselect.css', './multiselect.css'],
    ['primeng/resources/components/button/button.css', './button/button.css']
];

const plugins = [
    new CopyWebpackPlugin({
        patterns: primeNgCss.map( file => { return {
            from: require.resolve(file[0]),
            to: file[1]
        } } )
    }),
...