时间戳

首页 > 解决方案 > 一些 CSS 文件需要“text/css”，而一些需要“stylesheet/css”类型

javascript - 一些 CSS 文件需要“text/css”，而一些需要“stylesheet/css”类型

问题描述

对于这个问题，我可能会被撕成碎片，但我们开始吧。

我们都见过可怕的：

Refused to apply style from <URL> because its MIME type <TYPE> is not a supported stylesheet MIME type, and strict MIME checking is enabled.

它的起源和修复通常是面向项目的，StackOverflow 上的无数答案提供了无数的解决方案，其中许多不能通用。这是一个特殊的情况，我似乎无法理解，因为我主要在后端工作：

<link type="text/css" rel="stylesheet" th:href="@{/real-fun/css/stylesheet.css}">
<link type="stylesheet/css" rel="stylesheet" th:href="@{/real-fun/css/tail.select-light.css}">

我使用 Thymeleaf 作为模板/服务器端渲染引擎的选择。虽然不完美，但它为我完成了工作 - 因此th:href属性而不是常规属性和@{}语法。

事情是这样的——第一个文件必须加载，"text/css"否则浏览器拒绝应用其样式，而第二个文件必须加载为"stylesheet/css"，否则浏览器会阻止它。

在这两种情况下，它都声称文件是"application/json"类型的，但它们都不是。

在这种情况下，第一个不会加载，但第二个会：

<link type="stylesheet/css" rel="stylesheet" th:href="...">
<link type="stylesheet/css" rel="stylesheet" th:href="...">

在这种情况下，第二个不会加载，但第一个会：

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

在浏览器中风之前，我如何确定预期的 MIME 类型是什么？

标签： javascripthtmlcss

解决方案

所以，我不知道为什么或如何解决任何问题，但确实如此。

有一个名为 的文件tail-select.js，它导入了tail.select.js. 这是两个不同的文件，tail.select.js是库的实际 JS 文件。

即使tail.select.js不依赖tail-select.js- 这个导入以某种方式影响了它。删除tail-select.js文件后，该文件似乎错误地进入了项目 - CSS 文件加载得恰到好处，通过rel="text/css".

我无法理解一个分支 JS 文件如何导入另一个文件并且不对其执行任何操作来破坏导入的文件，此外 - 这如何改变了 CSS 文件的加载方式。尽管如此，它（不知何故）现在正在工作，我害怕再问任何问题。

推荐阅读