Using modular CSS with Bootstrap 4 and React

Question

I've enabled postCSS with ModularCSS and webpack:

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: "style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"
}

This means that I can now import "CSS Modules" like so:

components/app.js

import '../style/bootstrap.css';

This will ensure that the entire app is based on bootstrap's "global css", like resetting.

Furthermore, within components I can clearly define their dependencies on Bootstrap, e.g.:

components/control.js

import Bootstrap from '../style/bootstrap.css';

class Control extends Component {

  render() {
    return (
      <button className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}>choose me</button>
    );
  }
}

However, the syntax className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']} is hard to read and not easy to work with.

Has this issue been tackled before? Any suggestions on how to make it more readable and workable?

Answer 1

Have you looked at React CSS modules?

Using the decorator, it seems to be very usable.

https://github.com/gajus/react-css-modules#decorator

You will need to set this option to true for multiple class names

https://github.com/gajus/react-css-modules#allowmultiple