SASS-rails auxiliaires « image-url », « bien-url » ne fonctionnent pas dans des rails 3.2.1

Question

Je suis sur 3.2.1, avec SASS-rails-3.2.4 et 3.1.15 SASS ...

La documentation pour le pipeline d'actifs dit:

asset-url("rails.png", image) becomes url(/assets/rails.png)
image-url("rails.png") becomes url(/assets/rails.png)

...

Je fait le fichier suivant:

# app/assets/stylesheets/public/omg.css.sass

body
  background: asset-url('snake.gif', image)

#lol
  background: image-url('snake.gif')

et quand je visite localhost: 3000 / actifs / public / omg.css je reçois:

body {
  background: asset-url("snake.gif", image); }

#lol {
  background: image-url("snake.gif"); }

... J'ai aussi essayé de changer le fichier à omg.css.scss et changé la syntaxe à:

# app/assets/stylesheets/public/omg.css.scss

body {
  background: asset-url('snake.gif', image);
}

#lol {
  background: image-url('snake.gif');
}

mais obtenir les mêmes résultats ... Quelqu'un at-il une idée pourquoi ces aides ne fonctionnent pas?

Answer 1

En dépit de ce que dit la documentation, il semble que les options par défaut dans les rails 3.2.6 vous permettent de simplement faire fonctionner les choses avec des informations de chemin encore moins dans votre CSS. Par exemple. ../app/assets/images/rails.png est des références dans votre fichier example.css.scss avec quelque chose comme:

background: white url(rails.png) repeat-y;

Vous ne comprennent pas le image-url ou asset-url dans votre SCSS (pour autant que je sache), juste url(your_image.png) plaine. Ce peu de documentation semble être juste une explication de ce qu'il fait en arrière-plan.

Answer 2

Quand je frappe ce problème, c'était parce que je ne l'avais pas inclus le fichier css dans le pipeline d'actifs pour le pré-compilation. En conséquence, il serait généré lors de l'exécution. Parce que les rails SASS-gemme est souvent dans le groupe: actifs, les aides ne sont pas disponibles lors de la génération des fichiers css lors de l'exécution

.

Essayez d'ajouter la ligne suivante à votre application.rb (ou production.rb):

config.assets.precompile += %w( public/omg.css )

J'ai trouvé le correctif sur ce poste y compris une chasse aux sorcières autour de nommer les fichiers en les ajoutant à la precompiler.

Answer 3

Si vous avez mis à jour votre application Rails 3.1 dans le passé, assurez-vous que vous avez changé votre fichier application.rb de

# If you have a Gemfile, require the gems listed there, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env) if defined?(Bundler)

à

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require *Rails.groups(:assets => %w(development test))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

Voir cette Railscast sur la mise à niveau de Rails 3.1 et l'ajout du pipeline d'actifs.

Mise à jour: Rails 4 remonte à l'ancienne façon de le faire. Merci Aaron Gray

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)

Answer 4

Avez-vous activé le pipeline d'actifs application.rb?

config.assets.enabled = true

Vous avez droit en définissant l'extension de vos Sass à .css.scss feuilles de style. Cela permet de Rails connaître pour analyser le fichier avec Sass d'abord avant qu'il émet le contenu en CSS.

Answer 5

Vous pouvez essayer d'effacer / tmp / cache. Je suis trop nouveau pour Rails et Sass savoir pourquoi cela a fonctionné, mais il résolu pour moi le même problème après les heures de recherche.

BTW, cela a fonctionné malgré le fait que je pouvais voir d'autres directives Sass, telles que la définition des variables et le calcul avec eux, en cours d'exécution. Je suis sûr qu'il ya une explication très simple, une fois que j'ai le temps de le suivre vers le bas.

Answer 6

J'ai fait le changement proposé par @Ryan, ainsi que des rails de SASS mise à niveau:

bundle update sass-rails

SASS 3.2.6 travaillé pour moi, alors que 3.2.5 ne l'ont pas.

Answer 7

Nous avons juste eu le même problème et fixé en exigeant explicitement Pignons dans le Gemfile (même si elle est une dépendance de ActionPack):

group :assets do
  gem 'sprockets'
  gem 'sass-rails', '~> 3.2.3'
  # ...
end

Je ne sais pas pourquoi, mais ça fonctionne maintenant. ; -)

Answer 8

J'ai été cogne la tête contre ce pendant plusieurs jours. La seule solution qui a fonctionné pour moi a été comme suit:

1. Assurez-vous SASS-rails à votre: groupe de développement dans votre Gemfile.

2. Si cela ne résout pas, ajoutez ce qui suit dans un nouveau fichier dans config / initializers / appelé quelque chose comme « horrible_sass_patch.rb »:

   begin
     require 'sass-rails'
   rescue
   end
   
   if Class.const_defined? "Sass::Script::Functions"
     module Sass::Script::Functions
       # This function exists, but doesn't automatically register
       declare :asset_url, [:value]
       declare :image_url, [:value]
       declare :font_url, [:value]
       # ... etc
     end
   end
   

Note: Il faut donc que vous utilisez le « actif » mécanisme de chargement Bundler, à savoir votre application.rb utilise ce qui suit:

Bundler.require *Rails.groups(:assets => %w(development test))

... et si vos feuilles de style sont vendeur, assurez-vous qu'ils sont inclus dans la configuration de Sass:

if config.respond_to? :sass
  config.sass.load_paths << Rails.root.join('vendor', 'assets', 'stylesheets')
end

Answer 9

Vous pouvez simplement ajouter une barre oblique arrière / sur le chemin et l'utilisation url comme vous le faites habituellement.

background-image: url("/assets/rails.png")