question about the use of css files about redux-react-koa-isomorphic-counter-example HOT 4 CLOSED

Thank you, I'm glad it has been useful to you so far.

Regarding CSS files... Obviously there are many ways to approach CSS files.

If I were to add plain old stylesheets to this, the first thing I would do would be to get inline stylesheets working. The webpack page at http://webpack.github.io/docs/stylesheets.html has the instructions for this.

I would edit my webpack.config.dev.js file to include the css loader as shown in the configuration section of the link above.

That will allow you to "include" a stylesheet when your component is used. In your component

Then in my components.js file, I would conditionally include my stylesheet. See https://gist.github.com/khtdr/bd99c772548203a0f540 for an example that might work.

This should tell webpack to put that stylesheet inline when using that component. The counter example is probably not the best example since I tried to reduce the number of files being used, you are probably organizing things differently, but the idea is the same.

You should not have to muck with the Makefile to get stylesheets to work in this manner. Then you could work at getting the included as separate files. If you configure webpack to build those and copy them to the public directory, then you shouldn't have to change the Makefile even then. (the public directory only exists when building the app for prod, in dev it serves from memory I believe).

Hopefully this can get you further along. If you have more trouble, fork my repo and commit your changes to your fork and I can get a better idea of what you are doing.

Good luck :)

from redux-react-koa-isomorphic-counter-example.

Many thanks for your detailed answer. My mistake was to require the css file regardless of whether the code was for the client or the server.
Many thanks again.

from redux-react-koa-isomorphic-counter-example.

In the process of checking whether we are on the client/server before requiring the css file, I realized that you define __CLIENT__ and __SERVER__ variables on the window object client-side and on the global object server-side. As these are not polyfilled in both environments they cannot be used straight away. Why not use a variable on process.env through the webpack define plugin ? For example :

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    CLIENT: JSON.stringify(true)
  }
})

and then

if (process.env.CLIENT) require('./style.css')

from redux-react-koa-isomorphic-counter-example.

You are right. I think I put those in early on, thinking, "I might want these", and then never used them, so I never went back and cleaned them up.

from redux-react-koa-isomorphic-counter-example.