css - 将 CSS 文件添加到 Angular 时出现 Mime 类型错误

Question

我正在尝试使用 Angular 构建静态站点。我想要的是将一些全局 css/js/image 文件添加到 index.html

这是我在 index.html 中的代码

<link rel="stylesheet" type="text/css" href="css/layers.css">

我的 css 文件夹与 index.html 文件在同一层

我添加的每个样式表都出现此错误(来自 ng serve with chrome)

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

我也试过添加这个

#.angular-cli.json
"styles": [
        "styles.css",
        "css/layers.css"
      ],

我该如何解决这个问题？

我的 Angular 设置是

Angular CLI: 1.6.5
Node: 8.1.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Answer 1

方案一(安装Bootstrap)

您需要做的就是:

1. 转到 Angular 应用程序根目录下的 .angular-cli.json。

2. 修改样式数组以在 styles.css 之前包含 bootstrap

    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

注意:bootstrap 的路径是相对于 /src/index.html 的，这就是为什么你需要 "../" 之前 节点模块。

1. 退出 ng serve 的当前 session 并重新启动它。

这是一个 Awesome tutorial

方案2(引用了Bootstrap)

您需要做的就是:

1. 转到 Angular 应用根目录下的 styles.css。

2. 在顶部添加这一行:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

这里是 Angular docs