I've just started experimenting with Sinatra, deployed to Heroku, and so far I've been able to come to grips with the basics really quickly. Having said that, I'm a bit stuck on how to enable and use Stylus within my application.
Based on what I've read of the Sinatra documentation, this is how I've structured my very basic app.rb file:
require 'sinatra'
require 'stylus'
require 'stylus/tilt'
get '/' do
haml :index
end
In addition, here are the contents of my Gemfile:
source 'https://rubygems.org'
gem 'sinatra', '1.1.0'
gem 'thin'
gem 'haml', '>= 2.2.0'
gem 'stylus'
After using Bundler, and pushing my repo to Heroku it seems as though the necessary goodness is happening – console output shows that stylus, stylus-source and execjs (which I'm assuming is responsible for compiling the .styl files) are being included correctly.
My questions then are:
a) Where would the .styl files live? My current folder structure is:
app -
Gemfile
Gemfile.lock
Procfile
app.rb
public -
stylesheets
views -
layout.haml
index.haml
b) How do I compile/reference the .styl files? Linked in the head, referenced in the route, or ...?
a) I put any stylesheets (uncompiled) into app/views/stylesheets/.
b) You can either precompile them into app/public/css and then reference them the way you would reference any other external CSS, with a link in the head (which is how I do things) or, you can use the way you've set up for, by compiling via a route call, e.g.
get "/screen.css" do
stylus :"stylesheets/screen"
end
You will probably want to add in some kind of caching with this.