在 Heroku 上的 Rails 应用程序中使用 Bootstrap 时出现 Sass::SyntaxError答案

【问题标题】：Sass::SyntaxError when using Bootstrap in Rails application on Heroku在 Heroku 上的 Rails 应用程序中使用 Bootstrap 时出现 Sass::SyntaxError
【发布时间】：2014-09-20 10:14:44
【问题描述】：

我按照此处的说明将文件复制到我的资产目录中来安装 twitter bootstrap：http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/

完全按照提供的说明执行“rake assets:precompile RAILS_ENV=development”后，我可以在我的开发 Rails 服务器中使用引导程序 3。

但是，当我尝试执行“heroku run rake assets:precompile RAILS_ENV=production”时，我收到此错误：

Sass::SyntaxError: Invalid CSS after "...ss","sources":[": expected "|", 
was ""less/theme.les..." (in /app/app/assets/stylesheets/application.css) (sass):444

我不确定这意味着什么。当我在 assets/stylesheets 文件夹中打开“application.css”时，我什至找不到第 444 行。在运行“rails g scaffold ...”命令后，我确实有一些脚手架文件——这可能是导致这个问题？显然，当我从 heroku 页面查看部署的 heroku 应用程序并引发“找不到资源”错误时，它看起来像一个非引导应用程序。

在 public/assets/application-mydigest.ccs 中，我找到了导致错误的以下代码行：

{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes.less","bootstrap-theme.css","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"AAeA;;;;;;EAME,0CAAA;EC+CA,6FAAA;EACQ,qFAAA;EC5DT;AFiBC;;;;;;;;;;;;EC0CA,0DAAA;EACQ,kDAAA;EC7CT;AFqCC;;EAEE,wBAAA;EEnCH;AFwCD;EG/CI,0EAAA;EACA,qEAAA

但是，这似乎很奇怪，这只会在生产中发生。此外，CSS 语法看起来不错。

【问题讨论】：

您正在尝试使用 sass 预处理器编译 less 文件。这不会有好的结局。
你知道我怎样才能禁用导致问题的任何东西吗？我真的不知道为什么它只发生在生产模式。
从您拥有的资产开始 - 您有 application.css、.css.scss 还是 .css.less？里面有什么？
我有一堆 .scss 文件，还有 application.css 和所有与 bootstrap 相关的 .css 文件。引导安装似乎是正常安装，按照 OP 中链接的文章中的说明进行操作，这就是为什么这让我感到困惑。

标签： ruby-on-rails ruby twitter-bootstrap heroku sass

【解决方案1】：

此错误表示资产编译失败，因为您在 application.css 中需要的文件中的 css 语法无效。

在 bootstrap 存储库中有一个 less 目录，您不能使用 rails 预编译 less 文件。

如果您想在生产环境中使用 Rails 和 Bootstrap，我认为使用 bootstrap-sass gem 是更好的选择

【讨论】：

我最终使用了这个链接：rvg.me/2014/01/…

【解决方案2】：

您是否尝试过使用 rails-assets 而不是引用的添加 Bootstrap 3 的方法？我在 Heroku 上成功使用了它......并且只需在我的普通资产文件夹中添加我自己的自定义 Bootstrap css，这些文件夹在 vanilla Bootstrap 3 之后加载并覆盖它。只需将 gem 'rails-assets-bootstrap' 和 source 'https://rails-assets.org' 添加到您的 gem 文件中。如果没有别的，可能有助于诊断。

【讨论】：

这给了我一个“更少”的编译错误，但我想感谢您的尝试。
你安装了'less-rails' gem 吗？我认为在使用 Bootstrap 时某些版本存在一些问题。
另外，您是否有任何预处理器 gem，例如 less-rails、sass-rails 等，它们在 gemfile 的开发或生产组中，但在其他组中没有？

【解决方案3】：

在上线时，您必须注意避免资产编译错误的两件事。

- 在清单文件 (application.js/application.css) 中添加所有资产 (js/css) - 要么 - 使用 assets.precompile=%w(custom.css custom.js) 指令显式处理它们

因为当你预编译时...rails 将除 js/css 之外的所有内容（图像/字体）复制到公用文件夹中以由服务器（apache）处理，因此在资产预编译回退期间 production.rb 中的设置 # Don't fallback to assets pipeline if a precompiled asset is missed config.assets.compile = false默认情况下在生产/暂存中被禁用，因为 Rails 假设它将由 webserver 处理。因此我们有清单文件来定义我们的资产，这些资产在 assets:precompile 和通过查找 public/assets/javascripts/application.css/js 进行预编译和验证编译后创建需要 app/assets/stylesheets/application.css 和 app/assets/javascripts/application.js 中提到的所有文件，然后运行 assets:precompile...所以希望你知道你错过了哪里。

更多详情..请参考this

【讨论】：