拒绝应用来自 'http://localhost:1234/node_modules/primeicons/primeicons.css' 的样式，因为它的 MIME 类型（'text/html'）答案

【问题标题】：Refused to apply style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ('text/html')拒绝应用来自 'http://localhost:1234/node_modules/primeicons/primeicons.css' 的样式，因为它的 MIME 类型（'text/html'）
【发布时间】：2019-08-03 22:06:38
【问题描述】：

在 Angular 6 应用程序的 index.html 中添加以下样式时出现以下错误。

拒绝应用样式来自 'http://localhost:1234/node_modules/primeicons/primeicons.css' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并启用了严格的 MIME 检查。

  <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
  <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

我应该如何解决这个错误？

【问题讨论】：

可能复制到stackoverflow.com/questions/48248832/…
从 index.html 中删除它们并在 angular.json 中声明
最好的方法是在你的 style.css/scss 文件中添加样式

标签： angular primeng

【解决方案1】：

不要在您的index.html 中添加样式，而是将其添加到您的style.css 文件中，如下所示

Style.css

  @import '~primeicons/primeicons.css';
  @import '~primeng/resources/themes/nova-light/theme.css';
  @import '~primeng/resources/primeng.min.css';

希望这会有所帮助！

【讨论】：

【解决方案2】：

您有多种选择，如何导入样式。

导入 CSS

styles.css

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';

或者将它们添加到 angular.json

您也可以将它们添加到angular.json 文件中。

{
 ...
   "projects": {
    "yourProjectName": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/SkolniPanely",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.png",
              "src/assets",
              "src/manifest.json"
            ],
            "styles": [
              //Here you can add *.css files
            ],
            "scripts": [
              //Here you can add *.js files
            ]
          },
          ...

【讨论】：