twbs rails instalar con bootstrap ruby-on-rails sass asset-pipeline compass-sass

ruby-on-rails - con - instalar bootstrap rails



canalizaciĆ³n de activos sass-rails: generaciĆ³n de rutas de imagen incorrectamente; `url(/images/blah.png)` en lugar de `url(/assets/blah.png)` (8)

En la sección 2.2.2, "CSS y Sass" , me dicen que ponga image-url(''delete.png'') en mi sass. Y así lo he hecho.

Sin embargo, está generando CSS como

background-image: url(/images/delete.png)

en lugar de lo que me dicen en todas partes que debería estar generando, lo correcto y obvio,

background-image: url(/assets/delete.png)

Qué. Diablos.

He pasado días literales tratando de averiguar de dónde viene esto.

Aquí hay una lista de configuraciones relevantes que están resultando en este comportamiento. Aquí hay un resumen de los mismos archivos en una versión anterior de nuestra base de código (justo después de que implementamos el flujo de activos y en realidad funcionó durante aproximadamente una semana antes de que apareciera este comportamiento frustrante). ¿Puedes ver las diferencias? ¿Algún otro archivo que puedas imaginar que pueda estar causando esto?

Nota

  • Estamos utilizando deliberadamente una versión anterior de sass-rails porque una versión más nueva estaba causando un Stack level too deep! Errores al precompilar.
  • Estamos utilizando Compass.

Dos intentos de hackers en soluciones

Porque en realidad la solución de problemas de la tubería de activos un poco apesta.

1: Poner imágenes en / imágenes

Intenté mover todas las imágenes a public/images y agregarlas como una ruta de carga. Esto funcionó en dev (las imágenes están disponibles en /assets o /images ), pero la precompilación para producción pone las imágenes con huellas digitales en /assets asset solo (obvs), por lo que cuando sass-rails url(/imagse/delete-120398471029384102364.png) , no se puede encontrar.

2: Hacer / public / images un enlace simbólico a / public / asset

Probablemente esto funcionaría en producción, pero en el desarrollo no existe la carpeta / asset, por lo que las directivas url(/images/delete.png) dan como resultado imágenes no encontradas.


Después de editar mi archivo .scss (agregue un espacio) y volver a cargar la página, obtuve el resultado correcto. Después de que quité el espacio funcionó correctamente.


Este es nuestro combo de haml-rails, brújula y sass-rails. Aunque estamos corriendo rieles 3.2.6. Esto ha funcionado bien para nosotros.

gem ''compass'', git: ''git: //github.com/chriseppstein/compass.git'', ref: ''3a4c5c75dca9f07f6edf2f0898a4626269e0ed62''

gema ''haml-rails'', git: ''git: //github.com/indirect/haml-rails.git'', ref: ''92c41db61f20a9f122de25bc73e5045cfccdbcd5''

gema ''sass-rails'', ''~> 3.2.5''


Esto parece deberse a su versión de sass-rails (3.1.0). Puedo reproducir su problema (gracias por publicar el Gemfile) y desaparece al golpear los sass-rails 3.1.4.

Intente actualizar a 3.1.4 y borrar tmp/cache . También asegúrate de no estar accediendo a ningún caché del navegador.

Sé que dijiste que 3.1.4 estaba causando otros problemas ... ¿has probado versiones más altas?


No necesariamente una solución, pero ciertamente una opción disponible: si está abierto a usar spriting de brújula, reducirá el número de solicitudes http y podrá especificar manualmente su ruta de imagen con un mapa de sprites, es decir, ''$ sprites : sprite-map ("PATH / *. png"); ''


Para mi,

Cambiando image_path a image-path funcionó para .scss . Más tarde, cambié a image_path nuevo y ahora está funcionando bien.

Borrar el caché no me ayudó.


Realmente parece este problema: https://github.com/rails/sass-rails/issues/57 Si es así, debe intentar encontrar la buena combinación de versiones entre Compass y Sass-rails.

Y tal vez actualizar todo (incluidos los rieles) a las últimas versiones, sigue siendo la mejor manera de hacerlo (use el comando bundle outdated en el paquete 1.2 para saber qué Gems actualizar)


Sanity verifique el archivo en su línea de tubería de activos actual. Verifique que esté en uno de los directorios listados aquí:

<%= debug Rails.application.config.assets.paths %>

A continuación, compruebe en qué ruta relativa se encuentra la brújula para encontrar la imagen (y vea si encaja. Según los documentos de configuración de Compass , uno de estos debería indicarle:

<%= debug config.compass.http_images_path %> <%= debug config.compass.http_generated_images_path %>

Supongo que es el primero. De cualquier manera, compare su ruta a la ruta_valora de su imagen:

<%= debug asset_path ''delete.png'' %>

Si las rutas no coinciden, tal vez necesite ajustar la ruta en las configuraciones de su entorno (development.rb, ...) a esto, por ejemplo:

config.compass.http_images_path = ''/assets.

Alternativamente, puede mover la imagen a donde http_images_path o la http_generated_images_path esperan encontrarla.

En el punto, activo_ruta / activo_url (que es mucho menos frágil que la codificación) debería funcionar. Basé esto en una técnica similar que vi para las hojas de estilo,


Si aún no lo tiene, nombre su archivo css *.css.scss (a diferencia de .sass ; si hace esto, es posible que deba ajustar la sintaxis de algunas declaraciones). Luego use el helper image_path lugar de image-path , por ejemplo:

background-image:url(image_path(''delete.png''));

Espero que esto resuelva tu problema. Si no lo hace, ¿cuál es la ruta del activo generado por este enfoque para usted?