由于MIME类型

时间：2018-01-14 10:52:41

标签： html css gulp mime-types browser-sync

我正在使用gulp进行编译和浏览器同步的网站上工作，以使浏览器与我的更改保持同步。

gulp任务正确编译所有内容，但在网站上，我无法看到任何样式，并且控制台显示以下错误消息：

  

拒绝申请样式   ＆＃39; http://localhost:3000/assets/styles/custom-style.css＆＃39;因为它是   MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且   严格的MIME检查已启用。

现在，我真的不明白为什么会这样。

HTML包含这样的文件（我非常肯定是正确的）：

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

样式表是Bootstrap＆amp; amp;现在的字体很棒的样式（没有自定义）。

路径也是正确的，因为这是文件夹结构：

index.html
assets
|-styles
  |-custom-style.css

但我一直收到错误。

它可能是什么？这可能是gulp / browsersync的一些东西（可能是设置吗？）

58 个答案:

答案 0 :(得分：89)

我认为，问题在于以评论开头的CSS库。

在开发过程中，我不会缩小文件，也不会删除评论。这意味着样式表以一些注释开始，使其被视为与CSS不同的东西。

删除库并将其放入供应商文件（总是在没有注释的情况下缩小）解决了这个问题。

同样，我不是百分百肯定这是一个修复，但它仍然是我的胜利，因为它现在按预期工作。

答案 1 :(得分：75)

对于Node.js应用程序，请检查您的配置：

app.use(express.static(__dirname + '/public'));

请注意，/public最后没有正斜杠，因此您需要将其包含在HTML的href选项中：

href="/css/style.css">

如果您确实包含正斜杠（/public/），那么您可以href="css/style.css"。

答案 2 :(得分：50)

根据Angular结构在style.css文件的下方/上方创建一个文件夹，并提供<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">之类的链接。

Enter image description here

答案 3 :(得分：45)

当您没有正确引用CSS文件时，也会出现此错误。

例如，如果您的链接标记是

<link rel="stylesheet" href="styles.css">

但是您的CSS文件名为style.css（没有第二个s），那么您很可能会看到此错误。

答案 4 :(得分：30)

在大多数情况下，这可能仅仅是 CSS文件路径错误。因此，Web服务器会返回status: 404，其中包含Not Found类型的某些html内容负载。

浏览器遵循<link rel="stylesheet" ...>标记的此（错误）路径，旨在应用CSS样式。但是返回的内容类型矛盾，因此会记录错误。

Enter image description here

答案 5 :(得分：24)

我对于Bootstrap模板有此错误。

<link href="starter-template.css" rel="stylesheet">

然后我从链接中删除了rel="stylesheet"，即：

<link href="starter-template.css">

一切正常。如果您使用的是Bootstrap模板，请尝试此操作。

答案 6 :(得分：20)

我更改了'href'->'src'。所以从这个：

floats()

对此：

floats_notnull_32 = partial(hs.floats, allow_nan=False, allow_infinity=False, width=32)

有效。我不知道为什么，但是做到了。

答案 7 :(得分：18)

我知道它可能不在上下文中，但是链接不存在的文件可能会导致此问题，就像以前发生在我身上一样。

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

如果此文件不存在，您将面临该问题。

答案 8 :(得分：17)

我只是在angular.json的Angular 6构建配置的 styles 部分中引用了CSS文件（本例中为Angular主题）：

Enter image description here

这不能回答问题，但是对我来说，这可能是一个合适的解决方法。

答案 9 :(得分：10)

如本文中提到的解决方案，某些解决方案对我有用，但是CSS不适用于该页面。

简单来说，我只是将“ css”目录移到了“ Assest /”目录中，一切正常。

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

答案 10 :(得分：8)

您文件中的评论会将其发送。 有些缩小器不会删除评论。

ALSO

如果您使用Node.js并使用express设置静态文件，例如：

app.use(express.static(__dirname + '/public'));

您需要正确处理文件。

就我而言，两者都是问题，所以我用“/css/styles.css”为我的CSS链接加前缀。

示例：

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

答案 11 :(得分：8)

对于使用Angular-CLI并发布到网络服务器上的子文件夹的其他人，请查看以下答案：

当您部署到域中的非根路径时，您需要手动更新<base href="/">

中的dist/index.html.标记

在这种情况下，您需要更新为<base href="/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

答案 12 :(得分：7)

我的问题是我正在使用webpack并且在我的HTML CSS链接中我有一个相对路径，并且无论何时我会导航到嵌套页面，这将解析到错误的路径：

<link rel="stylesheet" href='./index.css'>

所以简单的解决方案是删除.，因为我的single-page application。

像这样：

<link rel="stylesheet" href='/index.css'>

因此它始终解析为/index.css

答案 13 :(得分：6)

进入我的浏览器控制台> network> style.css ...单击它，它显示“无法获取/ path / to / my / CSS”，这告诉我我的链接是错误的。 我将其更改为CSS文件的路径。

更改前的原始路径是localhost：3000 / Example / public / style.css 将其更改为localhost：3000 / style.css即可解决。

如果您正在通过app.use（express.static（path.join（__ dirname，“ public”））））提供文件；或app.use（express.static（“ public”））;您的服务器会将“该文件夹”传递给浏览器，因此在浏览器中添加“ /yourCssName.css”链接即可解决

通过在浏览器CSS链接中添加其他路由，您将告诉浏览器在指定的路由中搜索CSS。

总结...检查浏览器CSS链接指向的位置。

答案 14 :(得分：6)

您可以打开Goog​​le Chrome工具，选择网络标签，重新加载页面，找到CSS的文件请求，然后查看文件中的内容。

当您合并文件中的两个库时，可能是您做错了，包括一些不适合CSS的字符或标题？

答案 15 :(得分：5)

我遇到了同样的问题然后我检查了我写的：

index.html

中的

<base href="./">

然后我改为

<base href="/">

然后它运作良好。

答案 16 :(得分：4)

对于Node.js应用程序，只需在导入服务器文件中的所有必需模块后使用它：

app.use(express.static("."));
  • Express中的express.static内置中间件功能，在.html文件中：＆lt; link rel="stylesheet" href="style.css">

答案 17 :(得分：4)

如果您在没有JS的情况下使用Express，请尝试：

app.use(express.static('public'));

例如，我的CSS文件位于public/stylesheets/app.css

答案 18 :(得分：4)

在我的情况下，当我正在部署包时，我将它从公共HTML文件夹中删除。这是有原因的。

但显然已经激活了严格的MIME类型检查，我不太确定它是在我身边还是由我托管的公司。

但是当我将样式文件夹移动到与index.php文件相同的目录中时，我就停止了错误，并且样式被完美激活。

答案 19 :(得分：4)

除了一长串答案之外，我也遇到了这个问题，因为从浏览器同步的角度来看，我没有意识到路径是错误的。

给出以下简单的文件夹结构：

package.json
app
  |-index.html
  |-styles
      |-style.css

href中<link>内的index.html属性必须是app/styles/style.css而不是styles/style.css

答案 20 :(得分：3)

问题的一个主要原因是尝试加载的CSS文件不是有效的CSS文件。

原因：

  • 无效的MIME类型
  • 在样式表中包含JavaScript代码 - （可能由于错误的Webpack bundler配置而发生）

检查您要加载的文件是否是有效的CSS样式表（从网络选项卡获取文件的服务器URL并点击新选项卡并验证）。

使用＆lt; link＆gt;时需要考虑的有用信息在身体标签内。

虽然在正文中使用link标记不是使用标记的标准方法。但我们可以将它用于页面优化（更多信息：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery）/如果业务用例需要（当您提供内容的主体和服务器配置为必须呈现提供内容的HTML页面时）。 / p>

在保留在body标记内部时，我们必须在itemProperty标记中添加属性link，如

<body>
    <!-- … -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!-- … -->
</body>`

有关itemProperty的详细信息，请查看 https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document 。

答案 21 :(得分：3)

我遇到了同样的问题。

如果您项目的结构像下面的树，我建议您这样做：

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

在server.js中添加以下代码：

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

注意： Path是内置的Node.js模块，因此它不需要通过npm安装此软件包。

答案 22 :(得分：3)

当我将其移至localhost和PhpStorm时，我在一个在线工作的网站上遇到了这个问题。

这在网上很好用：

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

但是对于本地主机，我需要摆脱斜杠：

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

因此，我已经在这里补充了一些答案-这很可能是路径或拼写错误，而不是任何复杂的服务器设置问题。控制台中的错误是红色鲱鱼。首先需要检查404网络标签。

在这里提供的答案中，有一些不正确的解决方案。无法添加type="text/html"或将href更改为src。

如果要拥有所有属性，以便在最严格的验证器和IDE上进行验证，则应提供媒体值，rel应该为stylesheet，例如：

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

答案 23 :(得分：3)

除了使用：

<base href="/">

还要从您的CSS链接中删除rel="stylesheet"部分：

<link type="text/css" href="assets/styles/custom-style.css"/>

答案 24 :(得分：3)

这特定于Typescript + Express

我ctrl + f'd“ Typescript”和“ .ts”并没有在这些答案中找到任何内容，因此，我将在此处添加解决方案，因为它是由（我的经验不足）Typescript和解决方案引起的已阅读并没有明确解决此特定问题。

问题在于Typescript正在将我的app.ts文件编译为我项目的dist目录dist/app.js中的javascript文件

这是我的目录结构，看看是否可以发现问题：

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

我的问题是在app.ts中，我告诉express将我的公共目录设置为/public，如果Node实际上正在运行Typescript，那将是一个有效路径。但是Node正在运行app.js目录中的已编译JavaScript dist。

因此app.ts假装 dist/app.js解决了我的问题。因此，我通过更改

解决了app.ts中的问题 
app.use(e.static(path.join(__dirname, "/public")));

到

app.use(e.static(path.join(__dirname, "../public")));

答案 25 :(得分：2)

如果您将JavaScript中的样式设置为：

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

然后只需将cssLint.type（上面描述中的箭头表示）更改为“ MIME”：

   cssLink.type = "MIME";

这将帮助您摆脱错误。

答案 26 :(得分：2)

如果浏览器找不到相关的CSS文件，则可能会出现此错误。

如果您使用Angular应用程序，则不必将CSS文件路径放在index.html上

 <link href="xxx.css" rel="stylesheet"> -->

您可以将相关的CSS文件路径放在styles.css文件中。

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

答案 27 :(得分：2)

检查是否已启用或禁用压缩。如果您使用它或有人启用了它，那么app.use(express.static(xxx))将无济于事。确保您的服务器允许压缩。

将Brotli和Compression插件添加到Webpack时，我开始看到类似的错误。然后，您的服务器也需要支持这种类型的内容压缩。

如果您使用的是Express，则以下内容应会有所帮助：

app.use(url, expressStaticGzip(dir, gzipOptions)

模块称为： express-static-gzip

我的设置是：

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}

答案 28 :(得分：1)

就我而言，我必须确保链接是相对的，并且rel属性位于href属性之后：

<link href="/assets/styles/iframe.css" rel="stylesheet">

答案 29 :(得分：1)

我面对的是select2的挑战。我下载了该库的最新版本并替换了项目中的一个库（css和js文件）后，该库就解决了。

答案 30 :(得分：1)

删除rel =“ stylesheet”并添加type =“ text / html”。所以看起来像这样-

<link  href="styles.css" type="text/html" />

答案 31 :(得分：1)

就我而言，问题仅在更改.scss文件中的随机值后就解决了。重新加载后，问题消失了，样式也开始很好地加载。很简单，但是：P

答案 32 :(得分：1)

我在XAMPP中使用了虚拟域，并遇到了这个问题。因此，当我检查 httpd-vshosts.conf 文件时，我已明确指向index.php文件，这引起了问题。

所以我更改了此内容： 

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/index.php"
    ServerName cv.dv
</VirtualHost>

对此： 

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/"
    ServerName cv.dv
</VirtualHost>

，然后文件被加载而没有问题。

答案 33 :(得分：1)

在我的角离子项目中，我有一个这样的css条目用于组件，该组件仅在我请求时加载。

 .searchBar {
    // --placeholder-color: white;
    // --color: white;
    // --icon-color: white;
    // --border-radius: 20px;
    // --background: color:rgba(73,76,67,1.0);
    // --placeholder-opacity: 100%;
    // background-color: red;
  }

当我注释掉CSS类条目中的所有值后，它又开始工作。

我认为这是由于background-color和--background这些属性一起出现的。

答案 34 :(得分：1)

我面临着同样的问题。 

I change my directories' permission to "755" now all the files are loading.

您也可以尝试我的答案。希望这对您有用。如果答案适合您，请立即为答案投票。 祝你好运。

答案 35 :(得分：1)

三重检查文件的名称和路径。在我的情况下，我在目标文件夹中有类似这样的内容：

lib
    foobar.bundle.js
    foobr.css

这个链接：

<link rel="stylesheet" href="lib/foobar.css">

我猜浏览器试图加载JavaScript文件并抱怨其MIME类型，而不是给我一个找不到文件的错误。

答案 36 :(得分：1)

每个人的评论都没有帮助我，解决方案是修复路线，因为我从主页找到了文件，但是当我导航它时它消失了，正确的解决方案是将这些东西放置好

enter image description here

enter image description here

答案 37 :(得分：1)

我遇到了这个问题。

我拒绝应用'http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0'中的样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

更改路径可以解决此问题。

答案 38 :(得分：1)

我在Angular中遇到此错误。我解决它的方法是在我的链接元素上放置一个ngIf，这样在填充动态URL之前它就不会出现在DOM中。

它可能与OP无关，但我最终在这里寻找答案。

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">

答案 39 :(得分：1)

我遇到了同样的问题，经过数小时的调试后发现它与无法写入的临时文件有关。

转到管理员→配置→文件系统。设置正确的临时目录。确保您的服务器有权写入该目录。

答案 40 :(得分：0)

我如何解决这个问题。 对于Node.js应用程序，您需要设置**public**文件夹配置。

// Express js
app.use(express.static(__dirname + '/public'));

否则，您需要像href="public/css/style.css". 

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

注意：它将适用于http://localhost:3000/public/assets/css/custom.css。但是在构建后不要工作。您需要设置app.use(express.static(__dirname + '/public'));

答案 41 :(得分：0)

我想就这个话题分享一些想法，当我放置 app.use(expres.static('../frontEnd/public')) 时它不起作用，但是当我使用 app.use(express .static('/frontEnd/public')) 它工作正常，我希望这会帮助某人

答案 42 :(得分：0)

我也遇到了同样的问题：这是解决方案，不要在 .html 文件的 css 链接路径中写入 public。尽管您的 .css 文件存在于公共文件夹中。

示例：- js 文件

app.use(express.static("public"));

html 文件

使用这个

<link href="styles.css" rel="stylesheet">

代替

<link href="index/styles.css" rel="stylesheet">

答案 43 :(得分：0)

还请检查文件名中的拼写错误。发生在我身上：

style.css.css

答案 44 :(得分：0)

我几乎尝试了所有给定的解决方案，对我来说，问题是我在IIS中没有MIME types option，也就是说，我缺少此Windows功能。

solution对我来说是

”并且如果您使用的是非服务器操作系统（例如Windows 8或10），请在开始页上搜索“ 打开或关闭Windows功能”并启用： Internet信息服务->万维网服务->通用HTTP功能->静态内容”

启用IIS静态内容

Enable IIS Static Content

答案 45 :(得分：0)

如果您正在使用Node应用程序，请确保\public文件夹位于根文件夹的正下方，而不位于views文件夹内。这会变得很麻烦。将\public移动到根目录下，然后重新启动服务器并见证更改。

答案 46 :(得分：0)

我遇到了类似的错误，发现错误是在style.css链接href的末尾添加了'/'。

将<link rel="stylesheet" href="style.css/">替换为<link rel="stylesheet" href="style.css">可以解决此问题。

答案 47 :(得分：0)

我正在使用args = vars(ap.parse_args()) to args = ap.parse_args(args=[]) 应用程序，并且也遇到了导致我进入此错误的错误。这就是帮助我的原因。我没有向React.js添加<link>，而是向需要使用此样式表的组件添加了index.html：

import

答案 48 :(得分：0)

您必须已导入多个样式表。尝试删除一个并重试

答案 49 :(得分：0)

在我的情况下，这是Grunt执行的任务的执行顺序。

在执行connect和less转换样式之前，它正在执行设置本地服务器并自动在新标签页中打开应用程序的任务。{p>

基本上，我对此进行了更改：

postcss

对此：

grunt.registerTask('default', 'Start server. Process styles.', ['connect', 'less', 'postcss']);

它奏效了！希望它也能帮助其他人。

答案 50 :(得分：0)

此错误的另一个原因可能是CSS文件权限不正确。在我的情况下，文件不可访问，因为所有权已更改为root用户-这是由于将Git文件推送为root用户而发生的。

答案 51 :(得分：0)

我碰到了同样的问题，即向Azure B2C用户流添加自定义外观的问题。我发现的是html页所指的根是../ oauth / v2（即oauth服务器路径），而不是我的存储鲍勃的路径。

输入页面的完整网址对我来说是个问题。

答案 52 :(得分：0)

可能是您的授权伙伴Buddy：

尝试这些步骤：

  1. 转到ISS->找到列出的项目->单击它->单击右窗格中“操作”下的“编辑权限”
  2. 您将看到项目属性向导。点击证券
  3. 在组或用户名下->如果看到“已认证的用户”，则表明您已获得授权，如果没有，则必须具有它。
  4. 添加后（如果您是自己的，或者在公司工作时需要管理员的帮助：），网站将开始加载资源。您可能需要在ISS下重新启动项目。

谢谢

答案 53 :(得分：0)

我试图重新启动Windows计算机并重新安装了“ npm i”。

对我有用。

答案 54 :(得分：0)

引导样式未加载＃3411

https://github.com/angular/angular-cli/issues/3411

  1. 我安装了Bootstrap 3.3.7版

    npm install bootstrap --save

  2. 然后我将所需的脚本文件添加到angular-cli.json文件的apps[0].scripts中：

    "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

// And the Bootstrap CSS to the apps[0].styles array

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

  3. 我重新开始发球

对我有用。

答案 55 :(得分：0)

this thread的解决方案解决了我的问题：

  

不确定这是否对任何人都有帮助，但是如果您使用的是angular-cli，则通过从index.html中删除CSS引用并将其添加到“样式”部分下的angular-cli.json文件中来解决此问题。 。   重新启动网络服务器后，我不再遇到该问题。

答案 56 :(得分：0)

我遇到了同样的问题，就我而言，这是由于我手动尝试将HTML文件中的CSS文件导入（就像我们对静态网站一样），而实际上这些文件必须导入Webpack使用的入口点JavaScript文件中。

将样式表导入到主要的JavaScript文件中，而不是用HTML手动编写后，一切都按预期工作。

答案 57 :(得分：-1)

保存.ts文件（强制Ionic重建）为我解决了该问题。

这真的没有道理...但是只要可行，我要判断谁？

在这里，我看到了以下解决方法： ionic/angular2 - Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supported

相关问题
最新问题