在 Rails 中要求 sass 依赖项的正确方法答案

【问题标题】：the right way to require sass dependencies in Rails在 Rails 中要求 sass 依赖项的正确方法
【发布时间】：2014-11-29 11:15:34
【问题描述】：

我在我的 Rails 项目中使用 Zurb Foundation，但在我的项目中包含基础 scss 文件时遇到了困难。我希望能够在不同的 scss 文件中使用来自 foundation_and_overrides 的变量，但如果我需要在每个 scss 文件中使用 @import 这个文件，似乎基础将多次包含在我的项目中。

我的样式表结构如下：

application.css.css：

/*
 *= require_self
 *= require pages
 */

@import "foundation_and_overrides";

pages.css.css：

@import "foundation_and_overrides";

问题是如果我不在pages.css.scss 中导入foundation_and_overrides，我将无法使用基础预定义变量，例如$primary-color。

问题是：我应该如何正确使用 require 或 sass 导入函数，以便 Rails 只编译一次基础，我就可以在所有 scss 文件中使用基础变量？

【问题讨论】：

foundation 生成器实际上为您创建了foundation_and_overrides 文件，因此您可以根据需要对其进行修改并在您的application.css.scss 中导入一次。
我们能为这个问题想出一个更好的标题吗？我能想到的最好的办法是“使用 Rails 导入 Sass 文件而不重复代码”，但我不确定它是否准确地描述了问题。

标签： ruby-on-rails sass zurb-foundation

【解决方案1】：

诀窍是在根级别使用@import 指令，而不是使用require。 @import 指令由 SCSS 处理器控制，因此所有内容都应在任何 SCSS 文件中使用的范围内。例如：

# app/assets/stylesheets/application.css.scss

@import "defines";
@import "foundation_and_overrides";

@import "base";
@import "forms";

您可以将任何您希望对您的应用全局化的变量/混合定义放在定义.css.scss 文件中，然后让foundation_and_overrides.css.scss 使用这些（如果您愿意）。否则，在foundation_and_overrides.css.scss 之后定义的任何文件（按源代码/行顺序）现在应该可以访问所有基础变量（以及您自己的定义）。

【讨论】：

谢谢。对所有依赖项使用 @import 而不是 require 是一个好习惯吗？或者我应该只在某些情况下使用它？
我在所有情况下都使用它。我不知道有什么不好的原因。

【解决方案2】：

抱歉，SO 上的代码包含已损坏（因此代码看起来有点奇怪）

我的所有应用程序

不要将 application.css 重命名为 application.scss（对于 application.js 不要重命名为 application.coffee)
为scss文件创建目录
然后通过以下方式递归地要求目录：

# application.css
*/
 *= require_tree ./directory_name
*/

# application.js

#= require_tree ./directory_name

4. 对于 TwitterBootstrap / ZurbFondation 创建 shared/bootstrap-init.scssinclude @import 'bootstrap'; 中的文件它。 5. 然后需要清单文件中的文件：

# application.css
*/
 *= require_tree ./shared
*/

【讨论】：