Angular-cli build generated CSS not being interpreted in DOM

Question

I've got an issue currently when building my Angular 2 app using @angular/cli.

When I run ng build --prod to generate a dist build, everything works out fine, except that the generated styles.7b24f3befc9c595b00b9.bundle.css doesn't get interpreted properly in the browser, thus styles do not apply.

I do notice in the console there is a message that says:

Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream: "http://angular2.local/styles.7b24f3befc9c595b00b9.bundle.css".

The CSS file contents itself is proper, since copy/pasting that code into a tag properly gets interpreted by the browser and styles apply to elements.

Any help would be appreciated,

Thanks in advance

CLARIFICATION: Everything works in development (ng build), but when trying to build for prod (ng build --prod) the styles don't get interpreted properly. Both development and production environment.ts files are identical save for the production flag.

P.S. here are my versions: @angular/cli: 1.0.0-rc.0 node: 6.9.2 os: darwin x64

@angular/cli: 1.0.0-rc.0
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/primeng/resources/themes/bootstrap/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/nvd3/build/nv.d3.min.css",
        "assets/AmazeUI/css/amazeui.css",
        "assets/AmazeUI/css/admin.css",
        "style.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/d3/d3.min.js",
        "../node_modules/nvd3/build/nv.d3.min.js",
        "../node_modules/amazeui/dist/js/amazeui.js",
        "../node_modules/moment/moment.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

I'm not 100% sure, but you miss the styles.css file in the assets array in the angular-cli.json file. Add it and try again. And by the way - Angular expects css file, you are using style.scss. — kind user
The default is set to scss. Angular/cli supports sass, it's just that the production build generated css doesn't get loaded properly for some reason. The actual content of that file is correct, it is properly formatted css, but for some reason the DOM won't take it. If I copy paste that content into a style tag it works. — Andrew Ip
Your suggestion about adding the style to assets didn't work unfortunately. — Andrew Ip

Andrew Ip Andrew Ip · Accepted Answer · 2017-03-03T16:21:51

It was a mime-types issue with my nginx configuration.

As per Kind User, I reviewed the comments at Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server) and I ended up checking my nginx configuration, and true enough, mime-types were not defined in my custom configuration.

Angular-cli build generated CSS not being interpreted in DOM

1 Answers