我的元素有四个样式表:
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 文件:
- 任何导入的文件都可以访问 Bootstrap 类和变量
- Bootstrap 只包含一次,在包含@import 指令的文件的开头。
我一直在寻找一个 sass 指令,它只会在所有导入指令完成后才处理 sass。
再次尝试使用 <%= require 'shared_styles.sass' %>
包含该文件在选项和文章中直接包含文件而无需 SASS 预处理。但是,此方法无法编译。也许还有另一种方法可以做到这一点?
如果您知道最佳实践,我将不胜感激。
最佳答案
所以我真的不知道你的环境的细节,但是,这不是 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
关于css - rails : Bootstrap& SASS dependency management,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20776745/