在 Rails 资产管道中保留 SCSS 变量？答案

【问题标题】：Persisting SCSS variables in rails asset pipeline?在 Rails 资产管道中保留 SCSS 变量？
【发布时间】：2012-02-11 20:31:50
【问题描述】：

我正在升级一个带有大量 SCSS 样式表的 rails 应用程序以使用资产管道，并且需要为每个文件包含一些全局变量和 mixin。

在每个文件的顶部添加几个@import 指令不是很干，所以我想做这样的事情：

# application.css
/*
*= require variables
*= require mixins
*= require_tree .
*/

这当然行不通，因为变量不会跨文件持久化。有谁知道如何做到这一点？

【问题讨论】：

【解决方案1】：

将 require 替换为 @import 并删除任何 = require，即使您认为自己已将其注释掉。

【讨论】：

【解决方案2】：

默认清单语法不够强大，无法为您提供有用的 Sass 功能，如共享变量、mixin 等。相反，您应该：

而不是使用

/*
 *= require variables
 *= require mixins
 *= require_tree .
 */

废话，你现在应该使用

@import "variables";
@import "mixins";
@import "blah"; // import each SCSS file in your project like this.

这将确保您在整个项目中充分利用变量和 mixin，并在 Sass 允许的范围内保持 DRY。

【讨论】：

同意。这也是我一直在做的。
这个解决方案值得指出的一个烦恼是你所有的 css 都在一个文件中。 application.css 的想法是它仍然单独加载每个 css 文件（在 dev 中），这有助于 QA，因为您知道每个文件都包含在网络流量中。（授予 sass 您仍然可以检查问题并在 SASS 添加的 cmets 中查看它来自的 .scss 文件）
我相信你可以有rails输出源映射（fonicmonkey.net/2013/03/25/…），所以你可以直接检查源文件。
在使用新的@import 语法的同时还能使用/*= require_tree . 吗？
@MikeC 是的，但是当您不使用 @import 时，您将失去重用 mixins 或变量等的好处。所以最好完全切换到@import。

【解决方案3】：

简单地从每个 Scss 或 Sass 文件中导入必要的文件似乎对我有用。例如，我有一个 colors.scss 文件，其中包含一些像这样的常量：

$black: #222;

我在 application.css 清单中需要它以及其他一些文件：

/*
 *= require colors
 *= require buttons
*/

在我的buttons.css.scss 文件中，我只是这样做以避免错误：

@import "colors";

【讨论】：

【解决方案4】：

似乎不可能。最后在每个文件前面加上@import 'includes/all'; 并包括includes/all.css.scss 中的所有其他内容。

【讨论】：