Roux on Rails

[jaredlt]

I recently went through the process of configuring Rails to use Roux's boilerplate.

The main gotcha is that Rails 8 with Propshaft doesn't support @import so you need to use a CSS bundler (AFAIK).

I went with PostCSS because it's supported within cssbundling-rails although I appreciate there are faster options.

I documented my steps which are effectively a re-usable script. Putting it here first for feedback, but then maybe we could document this somewhere to help others?

# Roux on Rails

# How to set up Roux within a Rails app. Assumes Rails 8 (ie. `suspenders new <app_name>`).

# Copy Roux's CSS into css/
npx github:thoughtbot/roux init

# Move Roux's CSS into Rails' expected stylesheets directory
mv css/* app/assets/stylesheets/

# Tidy up unused defaults
# WARNING: Avoid this if you already have styles
# You will need to port them manually
rm app/assets/stylesheets/application.css
rm -r css/

# Install cssbundline-rails gem
bundle add cssbundling-rails

# Ensure yarn is installed
npm install --global yarn

# Install PostCSS for CSS bundling
bin/rails css:install:postcss

# Rename app.css to expected PostCSS format
mv app/assets/stylesheets/{app,application.postcss}.css

# NOTE: You can avoid a bunch of these steps if you `rails new myapp --css postcss`

[enatario]

@jaredlt yay thanks for integrating Roux and giving some great feedback!

You've hit on something that I should update in the docs: a bundler is highly recommended for Roux, because the raw @import approach tells the browser to load each file as a separate network request, which kills performance. I should make this clearer upfront in the README rather than burying it in step 4 of the quick start. I say it's optional but I wouldn't do it raw on most projects.

The docs call out using Lightning CSS since it's a very small package that really only does the bundling and minifying, but that you can use anything you want.

I'd love to incorporate your script into the docs, either as a Rails-specific setup guide or a "Using Roux with..." section. Would you want to open a PR for that?

[jaredlt]

@enatario yep! Let me open a PR, probably later this week