轨道 4 和指南针，如何只导入一次我的 sass 文件

Question

我有一个带有"样式表/应用程序/索引.css.scss"的 rail 4 项目，其中包含我的所有 css 文件：

 /*
 *= require jquery.ui.all
 *= require_tree ../shared
 *= require_tree ../design
 *= require_tree ../layout
 *= require_self
 *= require_tree .
 */

Rails只在一个最小化的CSS中编译所有CSS。

我需要在许多文件中导入@import "shared/header"。

示例：在"样式表/布局/main.css.scss"中

@import 'shared/header';
.header
{
  @extend .header_common_overview;
  [...]
}

但我也在其他文件中@import 'shared/header'。结果是 ：

当 Rails 只编译在一个文件中时，有很多次相同的规则".header_common_overview"，因为我在不同的文件中导入它。

我试图将"导入"指令直接放在index.css.scss中，但它不起作用。

那么，我怎样才能只导入一次文件，并且可以调用所有其他文件中的内容呢？

Answer 1

首先，不要使用require_tree . 您失去了对CSS文件的包含顺序的控制，这可能会导致级联问题 - 样式被覆盖，这确实不应该被覆盖。

我已经学会了避免在主 SASS 文件中使用链轮的require行，原因与您描述的类似。

• 它可能导致重复，尤其是在到处使用=require_tree时
• 变量/混合/等不能通过链轮包含（不过我很想被证明是错误的）

在你的index.css.scss你可能会考虑简单地把

@import "vendor";
@import "shared";
@import "design";
@import "layout";
// Your main styling here.
@import "another_file";

这些@import行对应于其他 sass 文件。 例如，shared.css.scss可能看起来像

/*
 *=require ./shared/header
 */

这个想法是

1. 保持资产的干净分离/组织，包括
2. 明确定义每个资产包含，以便您保留对包含顺序的完全控制
3. 使用 SASS @import 而不是 Sprockets =require指令来保持变量、mixins 等始终存在于随附的文件中。

Answer 2

我的解决方案是：创建所有.css.scss：

/*
 *= require jquery.ui.all => static, don't need import
 */
@import 'included/**/*'; //all files included (at first time)
@import 'all/**/*'; //all real css files which requires included file (in second times)

该命令受到尊重和控制。

包含的文件仅存在一次

包含的文件在每个真实的 CSS 文件中共享。

谢谢你的帮助。