为什么rails试图预编译.css文件答案

【问题标题】：why is rails trying to precompile .css file为什么rails试图预编译.css文件
【发布时间】：2012-01-12 01:03:42
【问题描述】：

我正在使用 Rails 3.1，在我的资产/样式表中我有一堆 .css 和 .scss 文件。

Rails 似乎正在尝试预编译 .css 文件，但出现以下消息：

Invalid CSS after "...{padding-bottom": expected "{", was ";0;}#order_deta..."

如果我只有 .css 文件，并且如果我从 Gemfile 中注释掉 sass-rails gem，那么一切正常。

group :assets do
  #gem 'sass-rails',   '~> 3.1.4'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
end

所以现在的问题是，我是否必须将所有 .css 转换为 .scss 才能很好地进行资产预编译，还是有解决方法？

更新：

这是我的代码：

config.assets.paths << "#{Rails.root}/app/themes/vanilla/assets/stylesheets"
config.assets.paths << "#{Rails.root}/app/themes/vanilla/assets/javascripts"
config.assets.paths << "#{Rails.root}/app/themes/vanilla/assets/images"
config.assets.precompile += ['vanilla.css', 'vanilla.js']

vanilla.css 看起来像这样：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. 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 'reset'
 *= require 'vroom'
 *= require_self
*/

这里reset是reset.css，vroom是vroom.css.scss

这是我得到的错误：

Invalid CSS after "...{padding-bottom": expected "{", was ";0;}#order_deta..."
(in .........../stylesheets/vanilla.css)

发生此错误是因为 Rails 正在尝试预编译 reset.css。

如果我删除 sass-rails gem 和所有 .scss 文件，则 rake assets:precompile 可以工作。

【问题讨论】：

你打算以后使用sass-rails吗？如果没有，似乎评论它是最好的方法。
但正如我所说，我有一些 .css 文件和一些 .scss 文件。我需要 .scss 的 sass-rails。似乎告诉 sass-rails 不编译 .css 应该很容易。我一定是错过了什么。
抛出异常的文件的扩展名是什么？您应该能够同时使用 css 和 scss 而不会出现任何问题。
@Nick 我已经更新了我的问题。请查看“更新”部分。

标签： ruby-on-rails ruby asset-pipeline

【解决方案1】：

您不必转换文件。这里发生的情况是 SCSS 处理器正在检查您的 CSS 文件的语法，即使它们没有作为 SCSS 处理。

仔细查看被投诉的线路。该错误似乎是说您在属性和值之间有一个分号 (;) 而不是冒号 (:)

可能是这样的：

{padding-bottom;0;}

而不是这个：

{填充底部：0；}

通过删除 gem，您正在删除语法检查，因此文件将按原样编译。

【讨论】：

我没有关注你。如果我删除 gem 那么 reset.css 和 vroom.css.scss 将如何组合成 vanilla.css 。
您不必移除宝石。 SASS gem 只是为 CSS 添加了一些语法扩展。管道仍将合并文件。您似乎在某处的 CSS 中存在语法错误。

【解决方案2】：

我遇到了同样的问题并找到了解决方案！

就我而言，我有这行：

@import "bootstrap"

我所要做的就是添加一个分号

@import "bootstrap";

小但致命的错误！

【讨论】：