Rails 资产：预编译奇怪的行为答案

【问题标题】：Rails assets:precompile strange behaviorRails 资产：预编译奇怪的行为
【发布时间】：2012-03-17 16:55:07
【问题描述】：

我发现自己面对assets:precompile 任务的奇怪行为，或者至少面对我不完全理解的东西。

所以，我在我的 Web 应用程序中使用 Rails 3.1.3、Sprockets 2.0.3、Less 2.0.11，再加上我依赖 Bootstrap 进行布局，所以我也在使用 less-rails 2.1.8 和 less-导轨引导 2.0.8。我已经像他们说的那样自定义了样式here。

我的资产配置是：

stylesheets
|--application.css.scss
|--custom-style/
   |--variables.less
   |--mixins.less
   |--buttons.less
|--custom-style.css.less

在 application.css.scss 我做

//=require custom-style

我也喜欢定制风格

@import "twitter/bootstrap/reset";
//@import "twitter/bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "custom-style/variables";
//@import "twitter/bootstrap/mixins";
@import "custom-style/mixins";
// And all the other standar twitter/bootstrap imports...

// Other custom-style files to import
@import "custom-style/buttons"
//...

// And other rules here
//...

最后在buttons.less 中，我使用了一些在variables.less 和mixins.less Bootstrap 文件中定义的变量和mixin，@white 和.buttonBackground 更具体。

如果我使用上述配置启动bundle exec rake assets:precompile，任务将失败并出现此错误：

$ bundle exec rake assets:precompile
/usr/local/rvm/rubies/ruby-1.9.3-p0/bin/ruby /usr/local/rvm/gems/ruby-1.9.3-p0/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
.buttonBackground is undefined

但是如果我这样做会改变

buttons.less --> buttons.css.less

@import "buttons"  --> @import "buttons.css.less"

一切正常！！

在使用嵌套导入时，它是否与更少的变量和函数的范围有关？还是与较少的解析器或 Sprockets 处理导入树的顺序有关？

我是否遗漏了什么或做错了什么？

谢谢:)

注意：即使使用原始变量和 mixins 文件也会出现错误，因此它与对它们进行的覆盖无关。

【问题讨论】：

“我发现自己在资产的一个奇怪行为面前：预编译任务” - 我们不是所有人:) 混合 application.css.scss 和你的 .less 文件也让我感到震惊可能是个问题。我会尝试其中一个/或 LESS/SASS，也许 Sass 无法识别您的 @import 指令。这不是必需的，因此更改 application.css.scss -> application.css，从 Gemfile 中删除 sass-rails，看看是否有帮助。祝你好运:)

标签： ruby-on-rails twitter-bootstrap less sprockets

【解决方案1】：

我现在能想到两种可能性之一：

1) 您应该将 application.css.scss 更改为 application.css.less 并使用：

@import "custom-style";

而不是链轮//= require ...

2) LESS 编译器对分号非常挑剔。我注意到你有 @import "custom-style/buttons" - 应该是@import "custom-style/buttons";

不知道问题是否真的那么简单，但这只是一个开始。

【讨论】：

【解决方案2】：

您是否尝试过将文件重命名为buttons.css.less，但保留@import 之外的扩展名（即@import "buttons"）？

这就是我使用 SCSS 的方式，并且效果很好。

另一个想法是将 application.css.less 中的 //=require custom-style 替换为 @import "custom-style" 指令。 Rails Guide here推荐使用@import（用SCSS/LESS处理）超过//=require（用Sprockets处理）：

如果你想使用多个 Sass 文件，你通常应该使用 Sass @import 规则而不是这些 Sprockets 指令。使用 Sprockets 指令，所有 Sass 文件都存在于它们自己的范围内，使变量或 mixin 仅在定义它们的文档中可用。

【讨论】：

@import "buttons" 不起作用，这是因为 LESS 解释器查找 .less 文件而不是 .css.less
你能把某处链接我吗？据我所知//=require 是您与 Sprockets 交谈的方式...
这里：guides.rubyonrails.org/… - 黄色框向下一点，我会在答案中粘贴它。
根据this（中途），.css.less 应该与@import 一起使用。我意识到这超出了我的知识范围，不过，作为一个 SCSS 人......

【解决方案3】：

这并不能真正回答您的问题，但这是您混合 sass 和 less 以使用 twitter 引导程序的唯一原因？如果您更喜欢只使用 sass，有一些引导程序 gem，作者将 less 转换为 scss，例如 bootstrap-sass。在我浪费太多时间试图在一个项目中兼顾两者之前，我会完全接受其中一个，但这只是我的看法。

【讨论】：