为什么不应用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 即将关闭。在这里阅读有关其他替代方案的更多信息 - 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]