Rails:通过资源管道使用livereload

Question

给rails专业人士提个小问题……

在使用Rails 3.0.x应用程序时，我是Guard和LiveReload的重度用户。但是，在使用Rails3.1中的资产管道时，livereload似乎不知道对Sass文件的更改应该触发向浏览器发送新的css。

是否有人将LiveReload与资产管道一起使用？如果是这样，你是如何让它工作的？

谢谢!

Answer 1

在关注了Github上的一些问题帖子后，我发现以下内容解决了我的问题：

1)确保所有scss文件按照新的资产约定命名，如下所示：filename.css.scss

我在Rails3.1之前就在使用scss，并且刚刚将我所有的sass文件命名为filename.scss。

2)在您的防护文件中使用以下livereload：

guard 'livereload' do
  watch(%r{app/helpers/.+\.rb})
  watch(%r{app/views/.+\.(erb|haml)})
  watch(%r{(public/).+\.(css|js|html)})
  watch(%r{app/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{app/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/javascripts/(.+\.js).*$})  { |m| "assets/#{m[1]}" }
  watch(%r{config/locales/.+\.yml})
end

Answer 2

我发现以下方法也运行得很好：

guard :livereload do
  watch(%r{^app/.+\.(erb|haml|js|css|scss|sass|coffee|eco|png|gif|jpg)})
  watch(%r{^app/helpers/.+\.rb})
  watch(%r{^public/.+\.html})
  watch(%r{^config/locales/.+\.yml})
end

这不是在您运行guard init livereload as时生成的默认代码，因为某些原因在sass导入中不能很好地工作。

Answer 3

正如@mirko在他的评论中提到的，scss文件上的额外.css是不推荐的。因此，添加该扩展并不是一个很好的解决方案，而且我曾经经历过，简单地添加scss扩展就会强制页面重新加载。

所以我发现这是可行的：

watch(%r{(app|vendor)(/assets/\w+/(.+)\.(scss))}) { |m| "/assets/#{m[3]}.css" }`

我的理解是这会将scss文件映射到编译后的css文件。我希望它也适用于sass。

Source: Github Issue