CODEWITHSUNDEEP
javascriptreactjswebpack
user944513
user944513

Reputation: 12729

why css class is not applied?

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

Upvotes: 3

Views: 327

Answers (3)

ihimv
ihimv

Reputation: 1474

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

Upvotes: 0

Saajan
Saajan

Reputation: 680

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]

Upvotes: 0

prabhu
prabhu

Reputation: 978

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

Upvotes: 1

Related Questions