如何在Sinatra应用程序中链接Sass文件？

Question

我想要将一个Sass文件链接到Sinatra应用程序中。 我有一个public/sass/styles.scss文件，并尝试在我的views/layout.haml文件中链接它。 我可以使用以下代码在我的layout.haml中链接常规css文件：%link(rel="stylesheet" href="styles.css")。 但是，当我尝试链接到我的sass/styles.scss时，它不起作用。 请问有人能告诉我如何在Sinatra应用程序中链接Sass css文件吗？谢谢！

- ab217

Answer 1

您可以使用Sass::Plugin::Rack

首先安装Sass gem。

如果您正在使用Bundler，请在Gemfile中添加以下内容：gem 'sass'。

在您的config.ru文件中添加：

require 'sass/plugin/rack'

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

然后在 public/stylesheets/sass/ 中创建一个文件夹，并将所有的 .scss 和 .sass 文件放在那里。

这将会在 public/stylesheets/ 中生成对应的 .css 文件。

例如：public/stylesheets/sass/style.scss 将会生成 public/stylesheets/style.css

就是这样，你可以更改默认路径和在参考文档中提到的其他选项。

- Agush

---

不确定为什么你在这里没有得到任何支持 - 这很有效，看起来更加清洁。 - Mojowen

@Mojowen 可能是因为这个问题相当古老，而答案又比较新。感谢您的点赞，我也发现这是一种更简单/更清晰的方法！ - Agush

毫无疑问，这是最好的答案，因为我不想使用罗盘。 - Marcelo Diniz

请注意，如果您使用 ruby myapp.rb 在开发模式下启动应用程序，则此方法不起作用，因为它会忽略 config.ru。相反，请使用类似 rackup 的方式启动应用程序。 - Henrik N

Answer 2

你不需要使用一个单独的宝石(gem)来编译你的.scss文件，Sass已经内置了这个功能。

sass --watch style.scss:style.css将自动设置Sass，每当它被更改时，就会将style.scss编译成style.css。来自Sass网站，

现在，每当你更改style.scss时，Sass都会自动更新具有更改内容的style.css。稍后当你拥有多个Sass文件时，你也可以监视整个目录。

- Paul Hoffer

Answer 3

你可以这样做：

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

- Leonardo Barbosa

Answer 4

您没有链接scss，scss与sass类似，不是浏览器解释的文件，您需要编译器来处理此文件并将其转换为css。

您需要安装指南针gem来自动生成css文件，然后像之前一样链接css。

以下是适用于sinatra的指南针配置示例：

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

- Fernando Diaz Garrido

---

他不需要单独的宝石来编译scss，因为Sass已经内置了这个功能。不过Compass看起来真的很有趣。 - Paul Hoffer

那个链接说：“如果你把你的样式表放在“views/stylesheets/”目录中而不是只有“views/”，请记得相应地更新sass_dir配置。”这句话的意思是什么？sass_dir部分是什么意思？ - JGallardo