why css class is not applied?

Question

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

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "gist.githubusercontent.com/eirikbakke/1059266/raw/…". This is your trouble creator — ihimv
– ihimv, Commented Nov 20, 2020 at 6:12

prabhu · Accepted Answer · 2020-11-20 06:13:34Z

1

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

answered Nov 20, 2020 at 6:13

prabhu

9789 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user944513 Over a year ago

so what will be the solution ?

Saajan · Accepted Answer · 2020-11-20 06:39:55Z

0

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]

edited Nov 20, 2020 at 6:39

answered Nov 20, 2020 at 6:34

Saajan

6901 gold badge9 silver badges20 bronze badges

2 Comments

user944513 Over a year ago

Thanks sajan . can we remove unused css ..? I am not using #someid can we remove that

ihimv Over a year ago

Yes you can remove that along with the comments in the file

ihimv · Accepted Answer · 2020-11-20 06:49:57Z

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

Collectives™ on Stack Overflow

why css class is not applied?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related