Sinatra 自定义 SASS 目录

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

我找到了解决办法。

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 放入我的/views 文件夹中。但是，您可以通过编辑 :scss => ' .scss 文件的路径来修改目标目录：

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

Answer 2

您已经给出了视图文件的路径，而不是渲染 SASS 文件的路径的路径。

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

Answer 3

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

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

如果你想让sass返回渲染后的styles.css，那么它需要从sass文件所在的位置开始。如果您希望它返回实际的 .css 输出，则不要在您的路由中使用 sass 渲染它，只需返回文件即可。