CSS isn't reloading properly

[iand675]

I've got the following in the project.clj file that I'm trying to use figwheel with.

:figwheel {:css-dirs ["resources/assets/css"]}

This is what I've got in the cljs app:

(fw/watch-and-reload
  :websocket-url "ws://localhost:3449/figwheel-ws"
  :jsload-callback (fn [] (do
                            (update-ui!))))

Whenever CSS files are changed, it tries to reload the CSS with the following URL:

<link rel="stylesheet" media="" href="//localhost:3449resources/assets/css/app.css?rel=1414087417074">

The issue appears to be that there's not a / after 3449 in the URL.

[bhauman]

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?

[iand675]

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. 

[bhauman]

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.

[bhauman]

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

[iand675]

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

[Deraen]

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?

[bhauman]

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 notifications@github.com 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.

[Deraen]

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?

[bhauman]

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

[bhauman]

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

[bhauman]

Added the :url-rewriter docs