Hacker News new | ask | show | jobs
by gedy 3667 days ago
> 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
1 comments
tracker1 3667 days ago
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.

link