时间戳

首页 > 解决方案 > 尝试导入模块时无法在 PrimeNG 中加载 multiselect.css，例如 MultiSelectModule

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

问题描述

我在浏览器中有错误

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

哪里可能有问题？

标签： angularprimengmulti-select

解决方案

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

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]
        } } )
    }),
...

推荐阅读