CODEWITHSUNDEEP
cssimport
Kyle Decot
Kyle Decot

Reputation: 20815

@import CSS not working

I am using the Chargify service and within their settings they allow you to include some custom CSS. I am including

@import url(http://swag-box.herokuapp.com/chargify.css);

I can see that the CSS is being embedded into the page but It doesn't seem to be affecting the page in anyway.

enter image description here

You can view the live page here.

What exactly is the problem here?

Upvotes: 2

Views: 16799

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

Using @import is not necessary. You can just do:

<link rel="stylesheet" type="text/css" href="//swag-box.herokuapp.com/chargify.css">

The use of // makes the request use the same scheme as the page. In your case the page scheme is https. However, you were including via http. Some browsers will considre this unsafe and block the resource. That is why you were not seeing the import (it was working). You can of course change the @import to use https or //.

You can also update the browser settings to allow the unsafe resource to be loaded, but this is a per-user setting. If you are using Chrome, you will notice a shield to the left of the favorites star.

No quotes are required in the url declaration for @import.

EDIT: always use https

Upvotes: 5

Related Questions