将 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）

拒绝应用来自 ‘ http://localhost:4200/css/layers.css ’ 的样式，因为它的 MIME 类型 (‘text/html’) 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

我也试过添加这个

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

我怎样才能解决这个问题？

我的角度设置是

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

原文由 sameera207 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

方案一（安装Bootstrap）

您需要做的就是：

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

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

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

注意：引导程序的路径是相对于 /src/index.html 这就是为什么你需要 "../" 之前 node_modules

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

这是一个 很棒的教程

解决方案2（引用了Bootstrap）

您需要做的就是：

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

2. 在顶部添加此行：

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

这是 Angular 文档

原文由 shireef khatab 发布，翻译遵循 CC BY-SA 4.0 许可协议