Question

我已经使用VS2017的创建项目向导启动了一个新的 .Net Core + Angular 5 应用程序。

我想在这个项目中使用primeng组件库。

它的node_modules/primeng/文件夹中有一些css文件，我需要在我的角度应用程序中导入以获得更好的UI。

我尝试按照网站上显示的代码进行操作但不起作用：

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

在我在VSCode上制作的另一个应用程序中，我使用以下代码在 .angular-cli.json 中添加这些文件：

   "styles": [
        "styles.css",
        "../node_modules/primeng/resources/themes/omega/theme.css"
        "../node_modules/primeng/resources/primeng.min.css"
      ],

但是在VS2017上制作的这个项目中，我无法找到任何可靠的位置来注入这些文件。

Answer 1

您必须在webpack.config.vendor.js文件中添加要捆绑为vendor的模块。如果将primeng和primeicons安装为npm依赖项，则可以使用以下代码。然后将其放在nonTreeShakableModules中，这样当您publish应用时它不会剥离。

const nonTreeShakableModules = [
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'primeicons/primeicons.css',
    'primeng/resources/themes/omega/theme.css',
    'primeng/resources/primeng.min.css'
];

您可能还需要修改一些rules才能包含primeicons的图像。在同一文件中，将gif添加到test节点

module: {
     rules: [
             { test: /\.(png|gif|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },

然后确保在模板/布局中包含vendor.css文件，您应该一切顺利！

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true">

要重新捆绑供应商文件，您可能必须删除dist和wwwroot中的Clientapp文件夹，然后重新构建项目

在VS2017上的dotnet core angular-5应用程序中创建的客户端应用程序中导入css文件

1 个答案: