Need better docs for CSS modules and howto for static images/fonts

[jamesmccann-zz]

Wondering if there are any good ideas and/or best practice techniques for serving images/fonts in a Rails/Webpack bundle configuration. At present I have a React app being bundled with Webpack into assets/javascripts. CSS Modules are being handled inline using Webpack's css-loader in modules mode, and my output bundle is deployed to app/assets/javascripts and served via the Asset Pipeline.

I'm looking for a tidy solution for handling images. I would like to be able to reference the images in my JS/CSS before being bundled by Webpack. One possible solution I stumbled upon was using file-loader to emit the image files into the bundle location, which might be able to give something like the following:

   |-app
   |---assets
   |-----images
   |-------daa9b80bc018404d6a944c220823751d.png <--- exported by file-loader
   |-----javascripts
   |-------bundle.js
   |-webpack
   |---assets
   |-----images
   |-------logo.png
   |-----javascripts
   |-------index.js <--- references webpack/assets/images/logo.png

And the image is then served by Rails. Has anyone tried this and had any luck with a solution?

[justin808]

We're doing it with CSS modules. We do plan to document this at some point. If anybody wants to submit a PR with a new file in the /docs directory, that would be great.

react-webpack-rails-tutorial/client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

Line 48 in ca98a44

<div className={css.twitterImage} />

import css from './CommentScreen.scss';

export default class CommentScreen extends BaseComponent {

  render() {
    return (
            <a href="https://twitter.com/railsonmaui">
              <div className={css.twitterImage} />
              Rails On Maui on Twitter
            </a>
}

react-webpack-rails-tutorial/client/app/bundles/comments/components/CommentScreen/CommentScreen.scss

Line 14 in 1ece366

background: url('./images/twitter_64.png') no-repeat;

.twitterImage {
  background: url('./images/twitter_64.png') no-repeat;
  height: 64px;
  width: 64px;
}

And webpack config:

react-webpack-rails-tutorial/client/webpack.client.rails.build.config.js

Line 38 in ca98a44

test: /\.scss$/,

// You can add entry points specific to rails here
config.entry.vendor.unshift(
  'bootstrap-loader/extractStyles'
);

config.module.loaders.push(
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
      'style',
      'css?minimize&modules&importLoaders=3&localIdentName=[name]__[local]__[hash:base64:5]' +
      '!postcss' +
      '!sass' +
      '!sass-resources'
    ),
  },
 );

[tmobaird]

I know this issue is a bit older, but this has been covered fairly well in the React on Rails docs Rails Assets and Using Webpack bundled assets with the Rails Asset Pipeline. @justin808 do you think these docs would suffice? Or is an example of using assets in the JS needed? (I believe there's already an example using images in the CSS)

[justin808]

@tmobaird Thanks for mentioning this. Maybe some points in the docs directory or readme here would we be great.

[tmobaird]

@justin808 good idea! I will find a place somewhere in the docs and readme to put those reference points.

[justin808]

This is going to change with Webpacker. @tmobaird Let me know if you want to get involved.

[tmobaird]

@justin808 I'd love to help out with this! Thanks for looping me in. Should I send a request to join the Slack team?

[justin808]

@tmobaird I sent you a slack invite!

[tmobaird]

@justin808 thanks!

[m5rk]

Is there any guide for how to use CSS Modules with React on Rails?

[justin808]

@m5rk CSS modules are not specific to React on Rails. Let me know if you have any other questions.