progapandist / evil_chat

Code for "Evil Front: Modern Front-end in Rails" 3-part tutorial: https://evilmartians.com/chronicles/evil-front-part-1

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question, styling

PrimeTimeTran opened this issue · comments

Hey guys,
Thanks for taking the time to put together an awesome tutorial. I've been wanting to use components for a long time but didn't know how to integrate it on my own.

If this doesn't constitute an issue, let me know and I'll close it; but would you guys mind letting me know how you handle adding things like Bootstrap?

I know you use PostCSS, but I've never touched that and when reading up on it didn't feel like it was strictly at odds with what you're doing now(removing sprockets & using components on the backend.) I could be wrong though... ignore the rest if I am.

Here's what I tried:
npm install bootstrap@3 => ── bootstrap@3.3.7
/frontend/init/index.css => @import "bootstrap"; I get the following complaint:
https://gist.github.com/PrimeTimeTran/27cff865389f1cd12ec87538b7c0a29a

I'm uncertain as to what file extensions I should use for Webpack logs, otherwise, I would have added it to provide syntax highlighting(I Googled like crazy but couldn't find something useful.)

Anyway, I'm really wanting to use components(eventually React) but would like to use Bootstrap/Bulma as well. Could you please advise on how you guys dealt with this issue if you guys did so as well?

Sorry if this doesn't constitute an issue once again, the blog posts didn't have a comments section and I didn't know where else to create a dialogue so that others might join as well.

Thanks in advance. Merry Christmas!

Hi! Sorry I can not provide you with more detailed explanation, as using Bootstrap is not the goal of our tutorial and we rarely use it in our projects, but it is certainly possible to use Bootstrap with Webpacker (just keep in mind that you will need to install jQuery too, as Bootstrap relies on it), quick googling shows stuff like this: https://gist.github.com/yalab/cad361056bae02a5f45d1ace7f1d86ef

Also, if the goal is using React — you're better off with some dedicated Rails+Webpacker+React tutorial, then following our guide — the whole point of it is to organize code without relying on an external framework.

Good luck and I'm closing the issue if you don't mind, as it does not really concern this repo.