Question

我在使用@ angular / cli构建我的Angular 2应用程序时遇到了一个问题。

当我运行 ng build --prod 来生成dist构建时，一切正常，但生成的样式.7b24f3befc9c595b00b9.bundle.css在浏览器中无法正确解释，因此风格不适用。

我注意到在控制台中有一条消息说：

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

CSS文件内容本身是正确的，因为将代码正确地复制/粘贴到标记中会被浏览器解释并且样式适用于元素。

任何帮助将不胜感激，

提前致谢

澄清：一切都在开发中（ng build），但在尝试构建prod（ng build --prod）时，样式无法正确解释。除了生产标志外，开发和生产环境.ts文件都是相同的。

P.S。这是我的版本： @ angular / cli：1.0.0-rc.0 节点：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": {
    }
  }
}

Answer 1

这是我的nginx配置的mime类型问题。

根据Kind User，我查看了Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)处的评论，最后检查了我的nginx配置，并且在我的自定义配置中没有定义mime-types。

Angular-cli构建生成的CSS未在DOM中解释

1 个答案: