尝试导入模块时无法在 PrimeNG 中加载 multiselect.css，例如 MultiSelectModule答案

【问题标题】：Failed to load multiselect.css in PrimeNG when trying import module eg MultiSelectModule尝试导入模块时无法在 PrimeNG 中加载 multiselect.css，例如 MultiSelectModule
【发布时间】：2021-12-22 23:09:12
【问题描述】：

浏览器出错

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 按钮这样的不太高级的元素时，我没有错误。

哪里有问题？

【问题讨论】：

错误似乎与Jest fails to load Primeng css files 非常相似，但我在运行应用程序时遇到了它。
该组件在我从第 1019 行中删除：styleUrls: ['./multiselect.css'] 时起作用：node_modules\primeng\fesm2015\primeng-multiselect.js。
这是同样的问题，但没有解决方案：githubmemory.com/repo/primefaces/primeng/issues/10457

标签： angular primeng multi-select

【解决方案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]
        } } )
    }),
...

【讨论】：