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 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到“master”文件的引用，其中将定义变量。似乎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来引用资产管道。

鉴于此，最好的方法是：

将application.css转换为application.css.less
删除所有Sprockets指令
@import目录中的每个单独文件。
从包含它的任何文件中删除.erb扩展名，并将ERB资产助手更改为less-rails资产助手。
确保在 annotations.css.less之后导入{em> {em>} - 这就是为什么使用bootstrap_and_overrides通常不是一个好主意，因为你无法控制加载文件的顺序。你现在拥有它的方式，annotations.css.less将在bootstrap_and_overrides之前加载 - 在你想要使用的变量存在之前。

希望有所帮助！

Answer 2

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

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

//other LESS styles
@import "annotations"

更多信息，请查看此宝石在其下使用的较少轨道。

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

我拥有的是什么：

什么行不通：

还不起作用：

2 个答案: