CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjspostcsscss-modules
Tom
Tom

Reputation: 8127

Using modular CSS with Bootstrap 4 and React

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?

Upvotes: 4

Views: 8708

Answers (2)

user3200167
user3200167

Reputation:

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

Upvotes: 1

QoP
QoP

Reputation: 28397

You could try to use classNames

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

let cx = classNames.bind(Bootstrap);


class Control extends Component {

  render() {
    let className = cx({
      btn: true,
      'btn-primary': true
    });
    return (
      <button className={className}>choose me</button>
    );
  }
}

Upvotes: 1

Related Questions