SCSS 样式未显示在“Jump Start Sinatra”一书中的 Sinatra 应用程序中答案

【问题标题】：SCSS styles not being shown in the Sinatra app from "Jump Start Sinatra" bookSCSS 样式未显示在“Jump Start Sinatra”一书中的 Sinatra 应用程序中
【发布时间】：2015-03-07 05:43:47
【问题描述】：

我按照Jump Start Sinatra 书中的教程进行操作，并查看了文件中的拼写错误。但由于某种原因，样式不会显示出来。

这里是说明

这就是我所拥有的

main.rb

require 'sass'
require 'sinatra'
require 'slim'
require 'sinatra/reloader' if development?

get('/styles.css'){ scss :styles }

get '/' do
  slim :home
end

get '/about' do
    @title = "All about this website"
  slim :about
end

get '/contact' do
  slim :contact
end

not_found do
  slim :not_found
end

require 'sass'

get('/styles.css'){ scss :styles }

这本书说要从公用文件夹中删除旧的styles.css，我这样做了（以前效果很好）。这本书确实说过要在views 目录中包含styles.scss。这是我的结构和 styles.css 文件

这是否意味着我也应该删除对我在 layout.slim 文件中的 CSS 文件的引用？这就是我现在所拥有的

layout.slim

doctype html
html lang="en"
  head
    title== @title || "Songs by Sinatra"
    meta charset="utf-8"
  body
    header
      h1 Songs by Sinatra
      == slim :nav
      section
        == yield

我错过了什么？是错字吗？我忘记做某事了吗？这本书是否存在假设读者会知道的信息缺口？我添加了代码，然后运行gem install sass 并重新启动服务器。那么我可能缺少什么？

【问题讨论】：

“有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含重现问题的有效代码。有关指导，请参阅 SSCCE.org。”
否决？没有。别人做了。我只是指出您需要添加更多信息。仅仅因为有人花时间试图帮助您阻止您的问题被关闭不就意味着他们对您投了反对票。结果我不明白你的态度。
当您访问样式表 URL（例如 http://localhost:9292/styles.css）时会发生什么？它显示什么错误？
这意味着您的styles.scss 中有语法错误。注释掉有问题的行，然后再试一次，看看 SASS 到 CSS 的转换是否有效。
其实你的错误在第一行：red: #903应该是$red: #903。你漏掉了前面的$。修复它，它应该可以工作。

标签： ruby sinatra sass

【解决方案1】：

好的，这有多个错误。希望我的解释能促使您提高解决问题的能力。

正如 cmets 中所指出的，我的 styles.css 文件中确实存在一些印刷错误。所以为了测试它，我访问了他们在 github 上的 repo。然后复制/粘贴到我的文件中。

然后我确实注意到作者在解释布局文件中应该做什么方面做得很差。所以我在 repo 中检查了他的文件（顺便说一下，这本书上一章中写的内容并不准确）。无论如何，这是有效的布局文件

layout.slim

doctype html
html lang="en"
  head
    title== @title || "Songs by Sinatra"
    meta charset="utf-8"
    link rel="stylesheet" href="/styles.css"
body
  header
    h1 Songs by Sinatra
    == slim :nav
    section
      == yield

需要修改以引用 CSS 文件

link rel="stylesheet" href="/styles.css"

【讨论】：