Question

我的haml模板让我的sass工作有问题。

最近我在我的主要sinatra.rb应用程序中有以下代码：

require 'sinatra'
require 'dm-core'
require 'dm-migrations'
require 'haml'
require 'sass'
require 'shotgun'


set :views, :sass => 'views/css', :haml => 'template', :default => 'views'

helpers do
def find_template(views, name, engine, &block)
    _, folder = views.detect { |k,v| engine == Tilt[k] }
    folder ||= views[:default]
    super(folder, name, engine, &block)
end
end


get '/css/styles.css' do
sass :styles
end


get '/' do
haml :index
end


I have following application directory structure:
site
|site.rb
|-sass > styles.scss (my scss file generate css realtime using sass --watch sass:css command                                   
|-css > styles.css 
|-template > index.haml

我的index.haml文件在模板文件夹中呈现正常。

我的index.haml模板：

!!! XML
!!!
%html
%head
    %title Some title
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "views/css/styles.css", "type" => "text/css"}
%body
    %h1 Some h1 
    %p Some p

Answer 1

您需要将sass views目录设置为正确的目录。

set :views, :sass => 'views/sass', :haml => 'template', :default => 'views'

如果你想让sass返回渲染的styles.css，那么它需要从sass文件的位置开始。如果你想让它返回实际的.css输出，那么你的路线中没有sass渲染它，只需返回文件。

Answer 2

您已经提供了视图文件的路径，而不是将呈现SASS文件的路径的路径。

%link{"rel" => "stylesheet", "href" => "/css/styles.css", "type" => "text/css"}

Answer 3

我找到了解决方案。

require 'sinatra'
require 'dm-core'
require 'dm-migrations'
require 'haml'
require 'sass'
require 'shotgun'


set :views, :scss => 'views/', :haml => 'template', :default => 'views'

helpers do
def find_template(views, name, engine, &block)
    _, folder = views.detect { |k,v| engine == Tilt[k] }
    folder ||= views[:default]
    super(folder, name, engine, &block)
end
end


get '/css/:name.css' do
  scss :styles
end


get '/' do
  haml :index
end

你可以看到，而不是：

get '/css/styles.css' do
  sass :styles
end

应该是：

get '/css/:name.css' do
  scss :styles
end

然后我将styles.scss放入my / views文件夹。但是，您可以通过编辑：scss =＆gt;来修改目标目录。 '.scss文件的路径：

set :views, :scss => 'views/', :haml => 'template', :default => 'views'

Sinatra自定义SASS目录

3 个答案: