首页 文章

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

提问于
浏览 次
10

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

这是我在 index.html 的代码

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

我的 css 文件夹与 index.html 文件位于同一级别

我为我添加的每个样式表收到此错误（来自ng服务与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
css angular mime-types

4 回答

  • 1

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

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

    然后 restarted server ，我的意思是再次执行 ng serve 并且正在工作 . 确保你已经完成并且 restared server 如果问题仍然存在请告诉我，我很乐意帮助你 . 谢谢 .

    回复于
  • 6

    解决方案1（安装了Bootstrap）

    你需要做的就是：

    1）转到角度应用程序根目录下的.angular-cli.json .

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

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

    注意：bootstrap的路径是相对于/src/index.html的，这就是在node_modules之前需要“../”的原因 .

    3）退出ng服务的当前会话并再次启动它 .

    这是Awesome tutoral

    解决方案2（引用Bootstrap）

    你需要的只是：

    1）转到角度应用程序根目录下的styles.css .

    2）在顶部添加此行：

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

    这是Angular docs

    回复于
  • 6

    如果你已经添加了angularcli.json，则无需在index.html中添加cli将自动注入内容 . 所以从index.html删除该行，所有都应该工作 .

    回复于
  • 3

    对于将面临同样问题的人 .

    此错误消息的常见原因是，当浏览器尝试加载该资源时，服务器会返回HTML页面，例如，如果您的路由器捕获未知路径并显示没有 404 error. 的默认页面，当然这意味着该路径不会返回预期 CSS file / image / icon / 无论如何...... ref from here

    让我们假设我们有 Angular 6 项目具有这样的文件结构

    project
    |-src
      |-app
      |-assets
      |-environments 
      |----

    假设我们需要将 theming 文件夹（包含thems）直接放在src文件夹中 .

    project
    |-src
      |-app
      |-assets
      |-environments
      |-vendor // Theming
         |-theme-light.css
          |theme-dark.css

    如果我们试图访问这样的主题文件 .

    <link rel="stylesheet" type="text/css" href: '../vendor/theme-dark.css'>

    这会引发错误

    拒绝从'http：// localhost：4200 / vendor / theme-dark.css'应用样式，因为其MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查 .

    如果我们在浏览器中通过该URL，则不会提供普通的css文件，因为路径错误 .

    Solution

    所以你需要做的是找到正确的路径 . （我们可以通过浏览过去查看 url ，看看会返回什么）

    在使用 ../src/ 引用的情况下，引用将修复错误

    <link rel="stylesheet" type="text/css" href: '../src/vendor/theme-dark.css'>

    Note: 确切的路径和路由器配置取决于您如何设置项目和正在使用的框架 .

    回复于

相关问题