不使用 `.css` 擴展名引用外部 CSS 文件

Question

是否可以在 HTML 中將純文本文件引用為 CSS 文件？ 我無法控制外部 CSS 文件的名稱或擴展名。 以以下為例：

我有一個名為index.html的文件，在<head>標記之間包含以下代碼：

<head>
    <title>Website</title>
    <link rel="stylesheet" href="https://example.com/styles">
</head>

example.com/styles的外部文件如下所示：

body {
    color: red;
    font-family: sans-serif;
    background: blue;
}

如果我打開index.html我會在瀏覽器的終端中收到以下錯誤：

樣式表https://example.com/styles未加載，因為其 MIME 類型“text/plain”不是“text/css”。

即使我在引用styles文件時使用type="text/plain"指定 MIME 類型，我仍然會遇到相同的錯誤。

同樣，我無法控制styles文件的名稱或擴展名。 我只知道它的網址。 顯然，可以通過讓 Web 服務器下載styles文件，然后為本地副本提供.css擴展名來緩解此問題，但對於此項目，我無法訪問后端服務器。

Answer 1

以下實現了您的意圖，但可以說是不好的做法。 它請求資源，然后將其插入style標簽，繞過瀏覽器的 MIME 檢查。 我建議獲取 CSS 並使用正確的Content-Type為其提供服務。

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS From Text File</title>
  <style id="style"></style>
</head>

<body>
  <div id="styled"></div>
</body>

<script>
  const style = document.getElementById('style');
  const req = new XMLHttpRequest();
  req.onloadend = () => {
    style.innerHTML = req.responseText;
  };
  req.open("GET", "style.txt");
  req.send();
</script>

</html>

樣式.txt


#styled {
  height: 100px;
  width: 100px;
  background: red;
}

不使用 `.css` 擴展名引用外部 CSS 文件

問題描述

1 個解決方案

解決方案1
1 已采納 2020-01-29 00:33:47

不使用 `.css` 擴展名引用外部 CSS 文件

問題描述

1 個解決方案

解決方案1 1 已采納 2020-01-29 00:33:47

解決方案1
1 已采納 2020-01-29 00:33:47