why css class is not applied?

user_3701974 0
Viewed 241

could you please tell me why css class is not applied. ?

I imported my css external file this. @import url("https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css");

used like this

export default function App() {
  return (
    <div className="someclass">
      <h1 className="someclass">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

here is my code https://codesandbox.io/s/priceless-turing-x62pz?file=/src/styles.css

webpack reactjs javascript
3 Answers

That's because the external css file is being interpreted as text rather than a css file

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

user_20983860

Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/

So this is nothing to do with your code.One of the alternative is copy the gist url and paste it in https://raw.githack.com/ it will provide the link which you can use to run the example.

i used your link to get this link https://gist.githack.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css applying this in ur css would work.

working sandbox [https://codesandbox.io/s/old-paper-lkdse]

user_30940010

I don't think GitHub allows to use its raw hosted files elsewhere and hence Github has blocked requests from Cross Domains.

It's a server-side configuration and you cannot enable CORS on Github servers.

An alternative way would be to host the file in some CDN or download the file and keep it locally.

Another alternative I found was to download the contents of the file via JS and then append it as style element.

Here is the updated CodeSandbox which works!

I never worked in React but I am sure you know better what would be the best place to keep the function that downloads the file.

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);
user_45753760
Related