2011-02-13 2 views
12

J'essaye de relier un dossier de Sass à une application de Sinatra. J'ai un fichier public/sass/styles.scss et j'essaie de le lier dans mon fichier views/layout.haml. Je suis capable de lier un fichier css régulier en utilisant le lien suivant dans mon layout.haml: %link(rel="stylesheet" href="styles.css"). Toutefois, lorsque j'essaie de créer un lien vers mon sass/styles.scss, cela ne fonctionne pas. Quelqu'un peut-il me dire comment lier un fichier css Sass dans une application Sinatra? Merci!Comment lier un fichier Sass dans une application Sinatra?

Répondre

6

Vous ne liez pas le 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 qui traite ce fichier et le convertisse en css.

Vous devez le joyau de la boussole pour générer automatiquement le code CSS de votre SCSS et vous lier le css que vous faisiez référence avant

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

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

+1

Il n'a pas besoin d'un gem pour la compilation SCSS depuis Sass a que construit. Compass semble vraiment intéressant cependant. Ce lien –

+0

dit: « Si vous gardez vos feuilles de style « vues/feuilles de style/» répertoire au lieu de « vues/», rappelez-vous de mettre à jour la configuration' sass_dir' en conséquence. » Qu'est-ce que cela veut dire exactement?la partie 'sass_dir' – JGallardo

16

Vous n'avez pas besoin d'utiliser une gem séparée pour compiler vos fichiers .scss, Sass l'a intégré.

sass --watch style.scss:style.css sera mis Sass pour compiler automatiquement style.scss dans style.css chaque fois qu'il se change. Depuis le Sass website,

Maintenant, lorsque vous changez style.scss, Sass mettra automatiquement à jour style.css avec les modifications. Plus tard, lorsque vous avez plusieurs fichiers Sass, vous pouvez également regarder un répertoire entier

13

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 
42

Vous pouvez utiliser Sass::Plugin::Rack

d'abord installer le bijou Sass.

Ajoutez 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 

Ensuite, créez un dossier dans public/stylesheets/sass/ et déposez tous vos fichiers et .scss .sass là-bas.

Cela va créer les Css correspondants dans public/stylesheets/

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

Et c'est, vous pouvez modifier les chemins de ceux par défaut et modifier d'autres options mentionnées dans le reference docs

+7

ne sais pas pourquoi vous n'obtenez aucun amour ici - cela a bien fonctionné et semble beaucoup plus propre – Mojowen

+2

@Mojowen c'est probablement parce que la question est assez ancienne et la réponse est un peu nouveau. Merci pour l'upvote, je trouve aussi que c'est une façon plus simple/plus propre! – Agush

+2

sans doute c'est la meilleure réponse, puisque je ne veux pas utiliser la boussole –

Questions connexes