拒绝应用来自 'http://localhost:1234/node_modules/primeicons/primeicons.css' 的样式，因为其 MIME 类型 ('text/html')

Question

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

Refused to apply the style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

  <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" />

我该如何解决这个错误？

Answer 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';

希望这会有所帮助！

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

拒绝应用来自 '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')

primeng

angular