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

Posted 2023-03-07

【中文标题】如何在 Sinatra 应用程序中链接 Sass 文件？

【英文标题】：How to link a Sass file in a Sinatra app?

【发布时间】：2011-06-26 14:37:21

【问题描述】：

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

【参考方案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

就是这样，您可以更改默认路径并更改reference docs中提到的其他选项

【讨论】：

不知道为什么你在这里没有得到任何爱 - 这效果很好，看起来更干净

@Mojowen 这可能是因为这个问题已经很老了，答案有点新。感谢您的投票，我也发现这是一种更简单/更清洁的方式！

毫无疑问这是最好的答案，因为我不想使用指南针

请注意，如果您在 dev 中使用 ruby myapp.rb 启动应用程序，这将不起作用，因为这会忽略 config.ru。而是使用 rackup 之类的内容启动应用程序。

【参考方案2】：

你可以这样做：

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

【参考方案3】：

你不需要使用单独的 gem 来编译你的 .scss 文件，Sass 已经内置了。

sass --watch style.scss:style.css 将设置 Sass 在 style.scss 发生更改时自动将其编译为 style.css。来自Sass website，

现在，无论何时更改 style.scss，Sass 都会自动更新 style.css。以后当你有几个 Sass 文件时，你也可以查看整个目录

【参考方案4】：

你不链接scss，像sass这样的scss不是应该由浏览器解释的文件，你需要一个编译器来处理这个文件并将其转换为css。

您需要 compass gem 从您的 scss 自动生成 css，然后按照您之前提到的那样链接 css

这里有一个 sinatra 的指南针配置示例：

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

【讨论】：

他不需要单独的 gem 来编译 scss，因为 Sass 已经内置了。不过 Compass 看起来真的很有趣。

该链接显示“如果您将样式表保存在“views/stylesheets/”目录中，而不仅仅是“views/”，请记住相应地更新sass_dir 配置。”这到底是什么意思呢？ sass_dir 部分