1

我有一个带有“stylesheets/application/index.css.scss”的rail 4项目和我的所有css文件：

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

rails 只在一个中编译所有 css，最小化（在 prod 中）。

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

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

@import 'shared/header';

.header
{
  @extend .header_common_overview;
  [...]
}

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

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

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

那么如何才能只导入一次文件，并能够调用所有其他文件中的内容呢？

4

2 回答 2

1

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

require由于与您描述的类似的原因，我学会了在主要的 SASS 文件中避免链轮的行。

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

在你的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指令来保持变量、mixin 等存在于包含的文件中始终可用。
于 2014-11-17T14:53:19.097 回答
0

我的解决方案是：使用以下命令创建 all.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 文件中共享。

谢谢帮助。

于 2014-11-17T20:21:32.923 回答