Refused to apply style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ('text/html')

Question

I am getting below error while adding below styles in index.html in Angular 6 application.

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

How should I fix this error?

Possible duplicate to https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type — MoxxiManagarm, Mar 13 '19 at 09:30

score 10 · Accepted Answer · answered Mar 13 '19 at 09:32

Instead of adding style in your index.html add it in your style.css file like below

Style.css

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

Hop this will help!

score 2 · Answer 2 · answered Mar 13 '19 at 09:48

You have several options, how to import styles.

Import to CSS

styles.css

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

Or add them to angular.json

You can also add them to the angular.json file.

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

Refused to apply style from 'http://localhost:1234/node_modules/primeicons/primeicons.css' because its MIME type ('text/html')

2 Answers2