如何使 Bootstrap sass 变量对另一个导入的 sass 文件可见？答案

【问题标题】：How do I make a Bootstrap sass variable visible to another imported sass file?如何使 Bootstrap sass 变量对另一个导入的 sass 文件可见？
【发布时间】：2014-09-06 23:21:42
【问题描述】：

我在 Rails 应用程序中使用bootstrap-sass。到目前为止，一切正常，但我刚刚尝试导入另一个使用引导变量的第三方 sass 文件，但它看不到它们。

在我的application.css.scss

*= require bootstrap_local

在bootstrap_local.css.scss

@import "bootstrap";
@import "bootstrap-social";

当我进行页面访问时，出现 Rails 错误

Undefined variable: "$line-height-computed".
(in .../app/assets/stylesheets/bootstrap-social.scss:11)

bootstrap-social.scss 所需的变量在之前导入的bootstrap 文件中定义（实际上它是在它包含的部分bootstrap/variables 中定义的）。

据我了解，这应该可行，因为bootstrap_local 是必需的，这意味着其中的所有内容都在一个范围内编译在一起，因此所有内容导入到bootstrap_local 被视为一个大文件。也许我有这个错误？

如果我将@import "bootstrap"; 扔到bootstrap-social.scs 中，那么它可以正常工作。但我不需要这样做，所以我要么做错了，要么我的设置有一些错误配置。

我需要做什么来解决这个问题？

宝石：

bootstrap-sass-3.1.1.1
sass-rails-4.0.3

系统：

Rails 4.0.1
ruby 2.0.0p247（2013-06-27 修订版 41674）[x86_64-linux]

（Bootstrap Social 是一组基于 Bootstrap 和 Font Awesome 的纯 CSS 制作的社交登录按钮。）

【问题讨论】：

可能重复：stackoverflow.com/questions/17976140/…
我读到了。特别是this，它提到用下划线前缀重命名文件，但没有区别。不过我会再试一次……

标签： ruby-on-rails twitter-bootstrap sass bootstrap-sass

【解决方案1】：

问题中描述的问题可以通过将application.css.scss清单更改为使用import而不是require来解决：

@import "bootstrap_local";

还需要从清单中删除任何require_tree .，否则需要相同的bootstrap_local 文件，因为它位于其路径中。

经过反思，清单中没有require tree . 可能是明智的，因为它可以防止包含不需要的文件。我之所以把它放在那里是因为它默认存在于一个新的 Rails 项目中（require_self 也是如此；不把它放在清单中会更干净）。

关于在文件前加下划线的建议，当你不需要文件时，这是一件好事，就像问题中的bootstrap-social编译成一个单独的 CSS 文件。所以，我最终将它重命名为 _bootstrap-social.scss。

【讨论】：