CSS isn't reloading properly about lein-figwheel HOT 11 CLOSED

For figwheel to work you have to have your css below the web root directory. Look at the example project. This defaults to resources public.

The url you should be seeing is "//localhost:3449/css/app.css?rel=1414087417074".

If you are using the default setup you just need to move your css folder into the resources/public directory.

If that's not going to help you can you send me your cljsbuild and figwheel config info from your project.clj?

from lein-figwheel.

Thanks for clarifying that! With a little bit of work I've got the CSS I want reloading into resources/public, but now I'm hitting a new issue. It looks like figwheel doesn't have CORS headers set for fonts:

Font from origin 'http://localhost:3449' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://circlehost:8080' is therefore not allowed access. 

from lein-figwheel.

I find it strange that you are having this problem. Where is the font request being generated from? If it's being generated from CSS what is the origin of the CSS file?

A general solution for your problem in the near term is to use the :url-rewriter client configure option. Supply :url-rewriter with a function that takes a URL and returns a URL that points to the asset in your app server.

from lein-figwheel.

Sorry your having these troubles I look into having a open CORS configuration. I didn't think Figwheel needed it.

from lein-figwheel.

No worries! I'm a little surprised too, but certainly appreciate the help.

Here's an example of the CSS that's triggering this:

@font-face {
  font-family: ProximaNova;
  src:url('../../webfonts/ProximaNova300.eot');
}

Where the CSS is in /public/css/app.css

from lein-figwheel.

I have the same issue (with the fonts) when I'm loading the page from my own ring server and thus the CSS is loaded from e.g. localhost:8080 when loading the page the first time. When figwheel reloads the CSS it's loaded from port 3449 and browser refuses to load the fonts.

Looks like I can use :url-writer to fix this but it would be nice if it worked by default.
Would it make sense if files were reloaded from the current host instead of figwheel server?

from lein-figwheel.

I here you here. I'm currently suffering from adding CSS reloading as a convenient afterthought.

Reloading from the Figwheel server makes sense because I know for sure what that path is and for other several other reasons. The path to assets on a custom server can be arbitrary and would require configuration to know it.

Fetching from the figwheel server allows it "to just work" in a great many cases.

I thought that script and link tags wouldn't trigger CORS problems but I didn't think it through fully. I'm going to add the CORS headers and hopefully that will fix it.

I'm not planning on focusing on CSS reloading as it gets really complex and there are many solutions out there already.

Sound fair?

On Nov 1, 2014, at 4:28 AM, Juho Teperi [email protected] wrote:

I have the same issue (with the fonts) when I'm loading the page from my own ring server and thus the CSS is loaded from e.g. localhost:8080 when loading the page the first time. When figwheel reloads the CSS it's loaded from port 3449 and browser refuses to load the fonts.

Looks like I can use :url-writer to fix this but it would be nice if it worked by default.
Would it make sense if files were reloaded from the current host instead of figwheel server?

—
Reply to this email directly or view it on GitHub.

from lein-figwheel.

Sounds fair.

This is what I used to get my project working:

  :url-rewriter (fn [u] (clojure.string/replace u ":3449" ":3000"))

Maybe there should be a note about :url-rewriter somewhere in the docs?

from lein-figwheel.

There should absolutely be a note about :url-rewriter in the docs. Working on it.

from lein-figwheel.

Just added cors headers and confirmed that it fixes the font-face problem in Chrome.
I'll hopefully have a release today.

from lein-figwheel.

Added the :url-rewriter docs

from lein-figwheel.