Question

Rails 3.1引入了一种通过引入清单文件来组织JS和CSS的新方法。例如，application.js可能如下所示：

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

这将抓取Jquery的各个部分，所有自己的JS，将它们连接在一起并将其作为单个文件提供给客户端。很简单。

不幸的是，SASS对我来说并不是那么清楚。 SASS已经使用@import内置了连接。

我应该将所有部分内容更改为完整的SASS文件，然后使用清单文件连接它们还是继续使用@import？为什么呢？

Answer 1

Sprockets在连接之前将所有导入转换为CSS，因此它不能用于跨文件共享mixins和变量。我猜这只是因为你可以通过这种方法导入SASS，LESS和CSS文件。

所以我就是这样做的：

如果我要包含ERB（主要用于asset_path()次调用），我将它们放在我的主文件application.css.scss.erb
如果我想要包含我想要包含的CSS，我需要通过Sprockets，例如//=require jquerymobile
在同一个文件中，我使用SASS @import命令显式加载所有文件。 @ import'ed文件中没有一个可能是.erb。
1. 加载基本内容（例如重置）和使用mixins导入
2. 声明变量
3. 导入特定样式

以下是我的app.css目前的情况。别忘了“;”和引号：

// Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

请注意，我仍在探索Rails 3.1资产管道，因此您的里程可能会有所不同。我会试着回来＆amp;如果我发现其他任何有趣的内容，请更新。

Answer 2

解决此问题的最佳方法是使用原生@import指令，如下所述：https://github.com/rails/sass-rails#important-note

此问题已在此处得到解答：how to use sprockets imports with sass

希望这有帮助！：）

Answer 3

sass-rails gem explicitly states不会将require语法与SASS文件一起使用 - 而是使用SASS的@import语句。

我应该使用@import还是清单文件？

3 个答案: