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

Question

我得到以下错误，而添加以下样式在index.html中的角6应用程序。

拒绝应用“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" />

我应该如何纠正这个错误？

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