Rails：Bootstrap和SASS依赖管理

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。

一个解决方案是在shared_styles.sass中使用@import 'universal_styles'，然后在文章和选项中都使用@import 'shared_styles'。然而，这种方法感觉非常静态和不灵活。

总的来说，我正在寻找一种添加sass文件的方法，以便：

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

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

另一种尝试是在选项和文章中使用<%= require 'shared_styles.sass' %>直接包含文件而不进行SASS预处理。然而，这种方法无法编译。也许还有其他方法？

如果您知道最佳实践，我将非常感激。

- Darren

Answer 1

我不太清楚你的环境具体情况，但是这不是一个理想的CSS配置。你需要限制从服务器加载的文件数量。在这种情况下，看起来你正在向最终用户加载四个样式表。我建议将它们合并成一个，即使用户在不需要所有样式的页面上。而是使用partials。基本上是不会自己编译的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 结构，使其更加灵活。下面是它的工作原理概述。原子设计方法论

- sevenfoxes