¿Cómo vincular un archivo Sass en una aplicación Sinatra?

Estoy intentando vincular un archivo Sass a una aplicación Sinatra. Tengo un archivo public/sass/styles.scss y estoy tratando de vincularlo en mi archivo views/layout.haml. Puedo vincular un archivo css normal utilizando el siguiente enlace en mi layout.haml: %link(rel="stylesheet" href="styles.css"). Sin embargo, cuando intento y me enlace a mi sass/styles.scss, no funciona. ¿Puede alguien decirme cómo vincular un archivo Sass css en una aplicación Sinatra? ¡Gracias!¿Cómo vincular un archivo Sass en una aplicación Sinatra?

Fuente

2011-02-13 agentbanks217

No enlaza el scss, un scss como un sass no es un archivo que se supone debe ser interpretado por el navegador, necesita un compilador que procese este archivo y lo convierta a css.

Usted necesita la joya brújula para generar automáticamente el css de su SCSS y luego enlazar el css como que se está refiriendo antes

Aquí tienes un ejemplo de configuración de brújula para Sinatra:

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

Fuente

2011-02-13 22:18:11

Él no necesita una gema separada para compilar scss ya que Sass tiene eso incorporado. Sin embargo, la brújula parece muy interesante. –

Ese enlace dice "Si mantiene sus hojas de estilo en el directorio" views/stylesheets/"en lugar de solo" views/", recuerde actualizar la configuración' sass_dir' en consecuencia. " ¿Qué significa eso exactamente?la parte 'sass_dir' – JGallardo

No necesita usar una gema separada para compilar sus archivos .scss, Sass tiene ese built-in.

sass --watch style.scss:style.css configurará Sass para compilar automáticamente style.scss en style.css cada vez que se modifique. Desde el Sass website,

Ahora cada vez que cambie style.scss, Sass actualizará automáticamente style.css con los cambios. Más tarde, cuando usted tiene varios archivos Sass, también se puede ver un directorio completo

Fuente

2011-02-14 04:23:00

Se podría hacer:

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

Fuente

2012-06-20 23:50:24

Puede utilizar Sass::Plugin::Rack

En primer lugar instalar la gema Sass.

Agréguelo en su Gemfile, si utiliza Bundler: gem 'sass'.

En su config.ru complemento:

require 'sass/plugin/rack' 

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

A continuación, cree una carpeta en public/stylesheets/sass/ y soltar todos sus archivos y .scss .sass allí.

Esto creará las Css correspondientes en public/stylesheets/

Por ejemplo: public/stylesheets/sass/style.scss generará public/stylesheets/style.css

Y eso es todo, puede cambiar las rutas de la falta de pago y cambiar otras opciones mencionadas en el reference docs

Fuente

2013-08-21 21:19:22 Agush

no estoy segura de por qué no recibes ningún amor aquí; esto funcionó muy bien y parece mucho más limpio – Mojowen

@Mojowen es probable que sea porque la pregunta es bastante antigua y la respuesta es algo nuevo. Gracias por el voto popular, ¡también creo que es una manera más simple/más limpia! – Agush

sin duda esta es la mejor respuesta, ya que no quiero usar la brújula –

¿Cómo vincular un archivo Sass en una aplicación Sinatra?

Respuesta

Cuestiones relacionadas