Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

Re:Show HN: ReactCSS – Inline Styles with Support for React,... by gedy on Tuesday June 07, 2016 @04:21PM (#11857475)

> The old way of doing CSS was crazy and unmanageable.

That's a bit of a stretch though, we've had good success with using normal CSS files, included in each component with webpack CSS-loader[1]. CSS is displayed in head as needed, but without an all-JS approach like this

[1] https://github.com/webpack/css-loader

[ Parent | on HN ]

Re:Show HN: ReactCSS – Inline Styles with Support for React,... by tracker1 on Tuesday June 07, 2016 @05:40PM (#11858139)

For that matter, it's not so hard to setup sass-loader with custom default locations... I'll usually have my own copy of bootstrap's variables.scss, a mixins.scss that points to bootstrap's... from there, I have a copy of bootstrap.scss included higher up pointing to the local mixins/variables, and the rest from the node_modules/bootstrap(-sass)/ path...

I can then, inside my component...

    require('./mycomponent-style.scss')
    .... <div class="mycomponent">

with the mycomponent-style.scss

    @import "variables";
    @import "mixins";
    
    .mycomponent {
      ...
    }

And have all of bootstrap's variables/mixins to work with... I can update variables for those bits of bootstrap I want changed, components also update based on those values. It actually works really well, and it's not hard to setup.

I should really write a current article on using Bootstrap@4 from source... There's a little bit of boilerplate, but so worth it.

That said, I do appreciate the inline options, and feel that future React apps in particular should probably go in that direction. It really just depends on how you are working with.

[ Parent | on HN ]