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

Question

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

Answer 1

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

首先安装Sass宝石.

如果您使用的是Bundler,请将它添加到您的Gemfile中:gem 'sass'.

在你的config.ru添加中:

require 'sass/plugin/rack'

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

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

这将创建相应的.css public/stylesheets/

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

就是这样,您可以更改默认路径并更改参考文档中提到的其他选项

Answer 2

您不需要使用单独的gem来编译.scss文件,Sass具有内置的.scss文件.

sass --watch style.scss:style.css将Sass设置为每当更改时自动将style.scss编译为style.css.来自Sass网站,

现在,无论何时更改style.scss,Sass都会自动使用更改来更新style.css.稍后当您有多个Sass文件时,您还可以观看整个目录

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

Answer 4

你没有链接scss,像sass这样的scss不是一个应该被浏览器解释的文件,你需要一个处理这个文件并将其转换为css的编译器.

您需要指南针宝石从您的scss自动生成css,然后您按照之前的方式链接css

这里有一个sinatra罗盘配置的例子:

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