6

我有的：

在 Rails 3.2.2 中，我有以下样式表：

    应用程序/资产/样式表
    |
    |-- application.css 
    |-- bootstrap_and_overrides.css.less
    |
    |-- annotations.css.less
    |-- maps.css.less.erb
    `-- users.css.less.erb

前两个或多或少是系统默认的。其他的是我定义我的自定义样式的地方。

所以，application.css像往常一样，包括所有其他文件：

*= require_self
*= require_tree .

当然bootstrap_and_overrides.css.less，还包括 Twitter Bootstrap 以及其他一些自定义的 LESS 变量。

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
// other stuff
@brown_text: #332820;

什么不起作用：

现在，在 中annotations.css.less，我想使用@brown_text，但它给了我：

variable @brown_text is undefined

我认为这是因为没有对annotations.css.less定义变量的“主”文件的引用。似乎annotations.css.less是先编译的——请注意，我目前处于开发环境中。

那么，我怎样才能使用我的自定义 LESS 变量，并使它们在其他样式表文件中可用？我目前的“修复”是将我所有的自定义样式移到bootstrap_and_overrides.css.less.erb中，这看起来一点也不干净。

什么也不起作用：

只import使用 LESS 文件是不可能的，因为它们使用 Rails 的资产路径助手。并且导入 ERB 文件也是不可能的，因为该@import语句不会找到该文件，因为它需要一个.less后缀。

4

2 回答 2

8

您不需要将 ERB 用于资产路径帮助程序 - 它们实际上已被烘焙到 less-rails gem 中，您可以在此处参考：https ://github.com/metaskills/less-rails/#helpers

您应该能够在使用 ERB 的任何地方使用资产路径或资产 URL 来引用资产管道。

鉴于此，最好的方法是：

  1. 转换application.css为application.css.less
  2. 删除所有 Sprockets 指令
  3. @import目录中的每个单独文件。
  4. 从任何具有 .erb 扩展名的文件中删除它，并将 ERB 资产帮助程序更改为 less-rails 资产帮助程序。
  5. 确保在之后annotations.css.less导入——这就是为什么使用它通常不是一个好主意的原因，因为您无法控制文件加载的顺序。按照您现在的方式，annotations.css.less 将在 bootstrap_and_overrides 之前加载 - 在您要使用的变量甚至存在之前。 bootstrap_and_overridesrequire_tree .

希望有帮助！

于 2012-07-17T23:17:45.357 回答
1

twitter-bootstrap-rails 编译的方式是，您需要将其他 LESS 样式表导入覆盖文件。因此，对于附加文件，annotations.less：

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

//other LESS styles
@import "annotations"

更多信息，请查看这个 gem 在下面使用的 less-rails。

于 2012-07-17T18:59:00.203 回答