为什么不应用CSS类？

Question

你能告诉我为什么不应用 css 类吗？？

我imported的 cssexternal文件是这样的。@import url("https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css");

像这样使用

export default function App() {

  return (

    <div className="someclass">

      <h1 className="someclass">Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>

  );

}

这是我的代码 https://codesandbox.io/s/priceless-turing-x62pz?file=/src/styles.css

Answer 1

这是因为外部 css 文件被解释为文本而不是 css 文件The resource from “https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff

Answer 2

我认为 GitHub 不允许在其他地方使用其原始托管文件，因此 Github 已阻止来自跨域的请求。这是服务器端配置，您无法在 Github 服务器上启用 CORS。另一种方法是将文件托管在某些 CDN 中或下载文件并将其保存在本地。我发现的另一种选择是通过 JS 下载文件的内容，然后将其附加为样式元素。我从未在 React 中工作过，但我相信您更清楚保存下载文件功能的最佳位置。function loadCssDynamically(fileUrl){    // read text from URL location    var request = new XMLHttpRequest();    request.open('GET', fileUrl, true);    request.send(null);    request.onreadystatechange = function () {        if (request.readyState === 4 && request.status === 200) {            var type = request.getResponseHeader('Content-Type');            if (type.indexOf("text") !== 1) {               var style = document.createElement('style');               style.innerHTML = request.responseText;               document.head.appendChild(style);               // console.log(request.responseText);               // return request.responseText;            }        }    }}var file = "https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css";loadCssDynamically(file);

Answer 3

重要提示：rawgit.com 即将关闭。在这里阅读有关其他替代方案的更多信息 -&nbsp;https://rawgit.com/因此，这与您的代码无关。另一种方法是复制要点 url 并将其粘贴到https://raw.githack.com/中，它将提供可用于运行示例的链接。我使用你的链接来获取此链接，https://gist.githack.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css在你的 css 中应用此链接可以工作。工作沙箱 [https://codesandbox.io/s/old-paper-lkdse]