css - rails : Bootstrap& SASS dependency management

Question

我的元素有四个样式表:

universal_styles.sass
shared_styles.sass
articles.css.sass
options.css.sass

articles.css.sass和 options.css.sass都包含:

@import 'universal_styles'; 
@import 'shared_styles'`;

但是，universal_styles.sass和 shared_styles.sass样式都需要 @import 'bootstrap' .我试图避免两次导入 Bootstrap。

我的一个解决方案是 @import 'universal_styles'在shared_styles.sass , 然后 @import 'shared_styles'在文章和选项中。然而，这给人一种非常静态、不灵活的感觉。

总的来说，我试图找到一种方法来添加 sass 文件:

1. 任何导入的文件都可以访问 Bootstrap 类和变量
2. Bootstrap 只包含一次，在包含@import 指令的文件的开头。

我一直在寻找一个 sass 指令，它只会在所有导入指令完成后才处理 sass。

再次尝试使用 <%= require 'shared_styles.sass' %> 包含该文件在选项和文章中直接包含文件而无需 SASS 预处理。但是，此方法无法编译。也许还有另一种方法可以做到这一点？

如果您知道最佳实践，我将不胜感激。

Answer 1

所以我真的不知道你的环境的细节，但是，这不是 css 的理想配置。您想要限制从服务器加载的文件数量。在本例中，看起来您正在向最终用户加载四个样式表。我建议制作这个，即使用户所在的页面不需要所有样式。相反，使用部分。基本上不能自行编译的 sass。 sass partial 是名称前面带有下划线的任何文件。即 (_input.scss) 这是我的建议:

主样式表:

//main.scss
@import "libs/libs";
@import "global/global";
@import "modules/modules";

现在让我们看看这三个文件中的每一个。将它们保存在不同的文件夹中正是我的做法。如果您想查看替代布局，我可以提供一些建议。无论如何，让我们继续在 libs 文件夹中使用 bootstrap 进行连接:

//_libs.scss
@import "bootstrap/bootstrap";

现在是全局的:

//_global.scss
@import "shared";
@import "universal";

最后，模块。同样，不要假设您必须遵守此命名约定。

//_modules.scss
@import "articles";
@import "options";

我最近(大约一个月前)将我的 scss 结构更改为更灵活的结构。以下是其工作原理的概述。 Atomic Design Methodology