Comment lier un fichier Sass dans une application Sinatra?

Je suis en train de lier un fichier Sass pour un Sinatra app. J'ai un public/sass/styles.scss fichier et je suis en train de lien dans mon views/layout.haml fichier. Je suis en mesure de relier régulièrement un fichier css en utilisant le lien suivant dans mon layout.haml: %link( href="styles.css"). Cependant, lorsque j'essaie de le lien vers mon sass/styles.scssil ne fonctionne pas. Quelqu'un peut-il me dire comment faire pour lier un fichier css Sass dans un Sinatra application? Merci!

source d'informationauteur agentbanks217

  1. 6

    Vous n'avez pas de lien de l'scss, un scss comme un sass n'est pas un fichier qui est censé être interprété par le navigateur, vous avez besoin d'un compilateur de traiter ce fichier et le convertir en css.

    Vous avez besoin de la boussole gem pour générer automatiquement le css de votre scss et ensuite, vous liez le css comme vous le faisiez allusion avant

    Ici vous avez un exemple de boussole de configuration pour sinatra:

    https://github.com/chriseppstein/compass/wiki/Sinatra-Integration

  2. 43

    Vous pouvez utiliser Sass::Plugin::Rack

    D'abord installer le Sass gem.

    L'ajouter dans votre Gemfile, si vous utilisez Bundler: gem 'sass'.

    Dans votre config.ru ajouter:

    require 'sass/plugin/rack'

Sass::Plugin.options[:style] = :compressed
use Sass::Plugin::Rack

    Puis créez un dossier dans public/stylesheets/sass/et déposer toutes vos .scss et .sass fichiers.

    Cela va créer de l'correspondant .css dans public/stylesheets/

    Par exemple: public/stylesheets/sass/style.scss va générer public/stylesheets/style.css

    Et c'est tout, vous pouvez modifier les chemins d'accès par défaut et modifier d'autres options mentionnées dans le référence docs

  3. 16

    Vous n'avez pas besoin d'utiliser une gemme pour compiler votre .scss fichiers Sass a intégré.

    sass --watch style.scss:style.css sera mis Sass pour compiler automatiquement les style.scss dans le style.css chaque fois que cela est changé. À partir de la Sass site web

    Maintenant, chaque fois que vous changer de style.scss, Sass sera automatiquement mise à jour style.css avec les changements. Plus tard, lorsque vous avez plusieurs fichiers Sass, vous pouvez également regarder un répertoire entier

  4. 13

    Que vous pouvez faire:

    get '/stylesheets/*.css' do
  content_type 'text/css', :charset => 'utf-8'
  filename = params[:splat].first
  sass filename.to_sym, :views => "#{settings.root}/assets/stylesheets"
end