What's the recommended approach for updating styles when client-side route updates #41
Comments
grgur
changed the title
|
With React.js you can use the convenient decorator function In your own framework, you must call the // frontend
import s from './PageStyles.css'
const removeCss = s._insertCss() // mount (create <style> DOM node)
removeCss() // unmount (remove <style> node from DOM)
// backend
import s from './PageStyles.css'
const response = s._getCss() // css string |
|
@frenzzy thanks a bunch for a quick answer. Ok, so the way i see it - |
|
You should use isomorphic-style-loader for both client-side and server-side bundles. Frontend uses |
|
Ok so basically the thing i was interested in is how the rest of the css (besides critical path) is transferred to the client. Looks like it's bundled in JS. Thanks |
|
@grgur yep, it's bundled into JavaScript bundle (or chunks) and it's usually a good idea to load that bundle asynchronously, for example, in the <script async src="/bundle.js"></script> |
|
Yes, exactly how i had it set up. Thank you for open sourcing this. It's top notch! |
Ok so let's say that our isomorphic app changes route and the client side router changed the view based on JavaScript. Is there an official approach to retrieving the CSS that was not already inserted in
<head>?In other words:
ok, here's my question
7. How should I retrieve the CSS needed for the Account page to show?
One approach could be to use the
ExtractTextPlugin, but that doesn't seem to work (because ExtractTextPlugin loader doesn't know how to call_getCss().Any ideas?
Thanks a bunch
The text was updated successfully, but these errors were encountered: