logo标签列表

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

cssangularmime-types
38

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

这是我的index.html代码:

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

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

我为每个我添加的样式表（通过使用chrome运行ng serve）都收到了这个错误：

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

我也尝试过添加这个：

#.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
你应该添加相对路径 "./css/layers.css"。 - Aravind
嗯嗯..请再次检查您的样式路径...记得angular.cli json文件从src文件夹开始.. - federico scamuzzi
1
你能否通过在地址栏中键入http://localhost:4200/css/layers.css将样式表加载到浏览器中？如果可以，请问浏览器报告的MIME类型是什么？ - Mr Lister
嘿@Aravind，我尝试了./css..，但是出现了同样的问题。@Mr Lister，我无法直接访问CSS。也许这是由于MIME类型问题而无法加载？ - sameera207
@sameera207 你的意思是说，你无法直接访问CSS文件吗？你是否收到了404错误？如果是这样，那很可能就是问题的原因。 - Mr Lister
1
@sameera207 你解决了吗？ - Rusty
19个回答
0

步骤1： 使用以下细节更新您的angular.json。

        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js"
        ]

步骤2： 确保index.html文件中没有“css”和“js”的引用。

0

我之前也遇到了同样的问题，只需要将它们从node_modules文件夹移动到assert文件夹中即可解决。 例如...

<script  type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/dist/css/bootstrap.min.css" />
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
0

检查文件名和路径是否正确，在我的情况下，我在 Angular 中的数组 css 下面。

src/styles.css

而在 index.html 文件中，我误添加了以下内容

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

在我的情况下，style.css 不存在，但是 styles.ccs 存在。

0
如果你正在使用Bootstrap CDN，那么你需要按照以下方式将其导入到src/styles.css文件中。 

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

Bootstrap的版本可以更改，这样你就可以使用你自己的版本。
0

这是链接您的layers.css文件的代码。

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

请从此行中删除type="text/css"。

因此，代码将变为：

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

请使用此行，希望现在可以正常工作。谢谢。

0
在资产文件夹内创建一个新的CSS文件夹，然后将您的CSS文件放入其中，再使用新位置重新链接即可。
Eg : -  <link rel="stylesheet" href="assets/css/materialize.min.css">
0

我尝试使用ng serve在asp.net zero中运行angular代码时遇到了这个问题。

通常所有的angular项目都可以通过ng serve命令运行。但是asp.net zero框架最初会缩小css文件，然后进行ng serve处理...这两个步骤集成在npm start命令中。如果至少执行一次npm start，则缩小的文件将存储在本地...因此下一次即使您执行ng serve，它也会正常工作。

因此，对我来说，运行npm start解决了这个问题。

0

我遇到了这个问题，因为我在angular中在*.html和angular.json文件中都定义了相同的*.css文件。

0
在index.html的所有样式顶部添加<base href="/">；对我来说有效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接