CSS Modules if using React and Webpack?

UX
1

Will CSS go the way of JavaScript with modules?

And if already using React + Webpack?

2015-10-30_21-34-45.png1281×710 297 KB

2

Hello @justin

I was checking how to use bootstrap-loader.

I notice that React CSS Modules is not used by the bootstrap-loader.

For example:
<span className={css.text}>It.</span>

at: FontAwesomeIcons.jsx

Why bootstrap-loader don’t use React CSS Modules in order to be able to use css like this:

<span styleName='text'>It.</span>

I’m a Rails developer, I’d like to know your opinion about this matter.

Additionaly I found another Bootstrap css module implementation that uses React CSS Modules.

https://github.com/StevenIseki/bootstrap-css

Which one is better ?

Thanks in advance.

3

I’m not clear on the question. bootstrap-loader is separate than using webpack for CSS modules.

From https://github.com/gajus/react-css-modules:

What’s the Problem?

webpack css-loader itself has several disadvantages:

  • You have to use camelCase CSS class names.
  • You have to use styles object whenever constructing a className.
  • Mixing CSS Modules and global CSS classes is cumbersome.
  • Reference to an undefined CSS Module resolves to undefined without a warning.

I don’t really see those as worth moving away from the simplicity of the plain webpack solution.

So I’d stick to our example: GitHub - shakacode/react-webpack-rails-tutorial: Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration. And React Native! Live Demo:, live at http://www.reactrails.com/.