如何让我的LESS变量可用于Rails中的所有CSS文件？

Question

是)我有的:

在Rails 3.2.2中,我有以下样式表:

    app/assets/stylesheets
    |
    |-- 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的引导,以及一些其他的自定义的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后缀.

Answer 1

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

您应该能够在您使用ERB的任何地方使用asset-path或asset-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 .

希望有所帮助!

Answer 2

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

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

//other LESS styles
@import "annotations"

有关更多信息，请查看 less-rails，该宝石在下面使用它。