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

Question

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

这是我在索引中的代码。html

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

我的css文件夹与索引处于同一级别。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

Answer 1

@sameera207评论中的答案是正确的，相对路径必须有效，我也有同样的问题，评论中的答案对我有效。我试图重现您的错误，我在索引级别创建了css文件夹。html和添加的css文件，然后在样式数组中添加路径。

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

然后重启服务器，我的意思是再次执行ng serve及其工作。确保您已经完成并重新启动了服务器，如果问题仍然存在，请让我知道，我将很乐意帮助您。谢谢

Answer 2

如果您已经有了这些样式。angularcli中的css。json或angular。json，在索引中不需要它。html。cli将自动注入内容。所以从索引中删除该行。html和所有东西都应该工作。

Answer 3

你需要做的就是：

>

转到。angular-cli.json在您的角应用程序的根目录下。

修改样式数组以在样式之前包含引导。css

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

注意：引导路径相对于src/index。html这就是为什么您需要在节点模块之前使用“../”。

这是一个很棒的教程

你需要做的就是：

>

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

在顶部添加此行：

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

这是Angular文档