rake assets:precompile 抛出 Sass::SyntaxError：在“*/”后面无效的CSS

Question

我希望这不是一个重复的问题；我已经尝试了 Stack Overflow 上的其他解决方案，但没有效果。

当将我的应用程序推送到 Heroku 时，推送失败，因为无法编译 application.css。

我的终端输出：

Running: rake assets:precompile
rake aborted!
Sass::SyntaxError: Invalid CSS after " */": expected selector, was "@font-face"
(in /tmp/build_17e92975-ae8d-446f-8678-110eeeccfb64/app/assets/stylesheets/adminsite/application.css)
(sass):1845

尝试解决方案

我已经搜索并删除了 ../stylesheets/adminsite/ 目录下 @font-face 前面的所有 "*/" 。但问题和结果都与之前相同。

我已经尝试设置：

  config.assets.compile = true

...同样的问题

编辑

这是我的application.css文件（不是应用程序级别的文件，而是在adminsite目录中失败的文件）

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery.ui.all
 *= require_self
 *= require normalize
 *= require ./global/plugins/bootstrap/css/bootstrap
 *= require ./global/plugins/uniform/css/uniform.default
 *= require ./global/plugins/bootstrap-switch/css/bootstrap-switch
 *= require ./global/css/components
 *= require ./global/css/plugins
 *= require ./global/plugins/simple-line-icons/simple-line-icons
 *= require ./admin/layout/css/layout
 *= require ./admin/layout/css/themes/light2
 *= require ./admin/layout/css/custom
 */

通过移除和重新编译，我发现

*= require ./global/plugins/font-awesome/scss/font-awesome

那个列表从底部算起排名第三的内容导致了它的失败。现在我可以在本地运行。

rake assets:precompile --trace RAILS_ENV=production

但是我无法使用 heroku 进行推送。

git push herokunb newbeta:master

已解决：

问题出在font awesome的CSS上。移除require中的相关内容即可解决。由于我在使用git时犯了自己的错误，导致这个问题看起来一直没有被解决。

- Will Taylor

---

这是一个位于临时目录而非项目目录中的文件。请删除该文件并重试。如果仍然出现问题，请打开该文件并在第1845行（或出现问题的位置）附近发布其内容。 - Substantial

你能发一下你的application.css吗？ - Richard Peck

发布了application.css。似乎没有“/tmp/build_17e92975-ae8d-446f-8678-110eeeccfb64/”...当使用rake时会被构建和删除？ - Will Taylor

请将您的解决方案发布为答案并接受它。 - Substantial

如果您删除Font Awesome CSS，您可以成功部署应用程序。但是所有页面都将没有该CSS。您如何处理它？ - DBZHOU

请查看我的答案：https://stackoverflow.com/a/73564234/445908 - Siwei

Answer 1

尽管你已经找到了解决方法，但我也会分享我的解决方案，因为我遇到了同样的问题，并且很难进行调试。

你可能正在使用 rails 3.2、sass-rails 3.2 和 font-awesome-sass 4.1。

事实证明，rails 3.2 使用的是 sass-rails 3.2.6，它依赖于 sass >= 3.1。然而，似乎 sass 3.1 不兼容 font-awesome 4.1，所以我在我的 Gemfile 中显式设置了 sass gem 的版本为 3.2。

gem 'sass-rails', '~> 3.2.6'
gem 'sass', '~> 3.2.0'

希望这能帮到某个人！;)

- Daniel Pereira

---

我曾经遇到过同样的问题，不同的版本，在底层sass gem从3.3.10更新到3.4.9之后。在Gemfile中明确设置它可以解决这个问题：gem 'sass'，'~> 3.3.10'。 - Curtis

Answer 2

另一种解决方法是明确告诉资产管道使用 css 版本的资产而不是 scss 版本。例如，如果您在 application.scss 中像这样导入 .scss 文件：

@import "angular-material";      # this will use scss version of the asset

你可以选择这样告诉它使用css版本：

@import "angular-material.css";  # this will use the css version

大多数供应商都提供scss和css版本，因此在使用供应商资产时，依赖于css版本的资产非常有用。请记住，最终所有内容都将被预编译和混淆，因此无论您使用scss还是css，它们最终都会变成相同的内容。

- moeabdol

Answer 3

我也遇到了类似的问题，并偶然发现了这个帖子。对我来说，问题出在我的一个CSS语句末尾缺少了一个}。我添加上去后，几分钟内就恢复正常了。

- PSCampbell

---

非常相似。我把所有的CSS文件都通过W3 CSS验证器，它发现了一个错误的“。” - SteveRawlinson

Answer 4

我是Rails的新手，在将代码推送到Heroku时遇到了类似的问题。我的一个朋友查看了我的application.css文件，发现我在以下位置：

*= require bootstrap

和

*= require bootstrap-datetimepicker

都在*/之后。

将它们删除后，我成功地推送了代码。

- darrellcohn

Answer 5

解决方案

导致问题的文件是字体awesome CSS。从application.css的“require”行中删除它可以使预编译工作正常。

做法是首先删除所有预编译要求字段，以显示它将编译，然后慢慢添加要求字段以查看其断点在哪里。

（感谢所有帮助解决此问题的人。）

- Will Taylor

Answer 6

对我来说，我忘记在类登录前面加上 #。

应该是这样的

#sign-in 
  (your code)

- Kevin Zhao