如何使用薩斯:: Engine的render_with_sourcemap

Question

看documentation for render_with_sourcemap後（不幸的是無法找到任何示例的這一使用），我的印象，下面應該工作：

@source_dir = './sass/' 
@target_dir = './css/' 
@output = Sass::Engine.new(File.read(@source_dir + 'style.scss'), { 
     cache_location: @source_dir + '.sass-cache', 
     style: :compressed, 
     syntax: :scss 
}).render_with_sourcemap(@target_dir + 'style.css.map') 

然而，錯誤我得到的是：

Error generating source map: couldn't determine public URL for the source stylesheet. (Sass::SyntaxError) 
No filename is available so there's nothing for the source map to link to. 

它的工作原理簡單地使用呈現（它不需要參數），而不是render_with_sourcemap，所以我導致相信我的文件名是錯誤的 - 但是，我沒有看到我做錯了什麼。我也嘗試/style.css.map,./style.css.map和@target_dir + style.css.map，都沒有成功（得到相同的錯誤）

Answer 1

看着source code of the Engine class，我發現如果@options[:filename]爲零，則從_render_with_sourcemap引發錯誤 - 使用該選項初始化該功能導致成功生成源映射。

以下代碼是生成用於將來參考的CSS文件和sourcemap所需的整個代碼

@source = './sass/' 
@target = './css/' 
@output = Sass::Engine.new(File.read(@source + 'style.scss'), { 
    cache_location: @source + '.sass-cache', 
    filename: 'style.css', 
    style: :compressed, 
    syntax: :scss 
}).render_with_sourcemap(@target + 'style.css.map') 

# write css to file 
File.write(@target, @output[0]) 

# write sourcemap to file 
sourcemap_options = { 
    :css_path => @target, 
    :sourcemap_path => @target + 'style.css.map' 
} 
File.write(@target + 'style.css.map', @output[1].to_json(sourcemap_options)) 

Answer 2

即使沒有記錄，你應該設置文件名變量。之後你應該得到一個sourcemap對象。