Use CSS Modules?

[justin808]

Will CSS go the way of JavaScript with modules?

And if already using React + Webpack?

https://www.youtube.com/watch?v=aIyhhHTmsXE

• http://glenmaddern.com/articles/css-modules
• https://github.com/css-modules/css-modules
• https://github.com/gajus/react-css-modules
• https://css-modules.github.io/webpack-demo/

Also posted here: http://forum.shakacode.com/t/css-modules-if-using-react-and-webpack/394

[justin808]

@alexfedoseev @jbhatab @samnang @robwise @josiasds @mapreal19 @dylangrafmyre Worth considering!

[jbhatab]

This blog was great on ICSS. http://glenmaddern.com/articles/interoperable-css. I think it's the matching blog to the video.

I'm definitely on board.

[robwise]

The cool thing about doing it this way is that you can put the styling for your "bundle" (here meaning a folder within client/app/bundles) with the actual bundle, which is cool for organization as well as for modularity (meaning it's easier to extract the component for reuse components across apps, if you wanted to).

[rstudner]

I've used this css bundle technique. It is very handy

[justin808]

Had great chat with @alexfedoseev. Looks like this can work. @jbhatab, you'll be proven right about creating the CSS within Webpack. Here's the steps:

• Update the bootstrap-sass-loader so that it wraps the resulting sass in :global {}. See Add global wrapper for CSS Modules bootstrap-sass-loader#36
• We'll need a new webpack config file to build the extracted CSS along with fingerprinting the corresponding assets, written to the /public/ directories (what's the directory structure within /public?).
• Update assets.rake so that it adds another line, like this, plus updating the clobber task:

  desc "Compile assets with webpack"
  task :webpack do
    sh "cd client && npm run build:client"
    sh "cd client && npm run build:server"
    sh "cd client && npm run build:css_assets"
  end

[justin808]

@alexfedoseev and I are working on: https://github.com/shakacode/bootstrap-loader/tree/alex/bootstrap-4. We'll be adding CSS modules here shortly.

[justin808]

Done! this is in master!