使用 Bootstrap 整理应用程序 SASS 文件

Question

我开始处理大型应用程序样式文件。由于 Bootstrap 4 提供了 SASS 个文件，我决定走这条路。

我构建了以下文件结构：

theme.scss：主题的一般定义，如颜色和字体。今天只有一个，以后可能会有更多。
global.scss：包括 Bootstrap、一些 Bootstrap 覆盖和应用程序组件 - 即其标签作为上边框的一部分的字段。
site.scss: 通用应用样式。
其他页面特定 SCSS 文件。即：login.scss.

我遇到的问题是 global.scss - 导入 Bootstrap- 然后由 site.scss 以及其他文件（如页面特定的 S[=）导入78=] 文件。因此，Bootstrap 样式最终会编译成多个 CSS。已编译的 CSS 文件是应用程序实际引用的文件。

我以前使用过 LESS，我可以使用 @import (reference) "bootstrap" 而不是简单的 @import "bootstrap" 来解决这个问题。对于 SASS，我无法在不修改 Bootstrap 核心文件的情况下找到解决此问题的方法。

有没有其他推荐的方法来组织文件并避免这个问题？我是不是遗漏了什么或做错了什么？

以下是文件内容（它们是大文件，但我发布的内容足以说明我遇到的问题）：

theme.scss

$my-primary-color: #04459a;

global.scss

@import "../theme.scss";
$primary: $my-primary-color;
@import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
    // [...]
}

site.scss

@import "global.scss";
div.field {
    @extend %field;
}
// [...]

login.scss（或许多其他）

@import "global.scss";
// [...]

在应用程序中，我引用了 site.css 和 login.css（当然是在登录页面），它们都包含 Bootstrap 样式。

Answer 1

我构建了一些适合我的东西，但不确定它是否是最佳解决方案或者它有哪些缺点。

我从这篇文章中得到了一些想法：My favored SCSS setup with Bootstrap 4。这是我构建的：

首先，我创建了两个 SASS 文件用于导入 Bootstrap（类似于文章对 bootstrap/_config.scss 所做的，但分开了）：

bootstrap/_sass-componentes.scss

@import "../../terceros/bootstrap/scss/_functions.scss";
@import "../../terceros/bootstrap/scss/_variables";
@import "../../terceros/bootstrap/scss/_mixins";

bootstrap/_config.scss

@import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
@import "../../terceros/bootstrap/scss/_root";
@import "../../terceros/bootstrap/scss/_reboot";
@import "../../terceros/bootstrap/scss/_type";
// [...]
@import "../../terceros/bootstrap/scss/_utilities";
@import "../../terceros/bootstrap/scss/_print";

然后在 global.scss 中，我将 bootstrap.scss 导入行更改为仅导入 bootstrap/_sass-componentes.scss
最后，在 site.scss 中，我包含了 global.scss（就像以前一样），然后 Bootstrap 文件通过 bootstrap/_config.scss。 **

** 在导入 _config.scss 之后，我还导入了我的 Bootstrap 定制。为了做到这一点，我遵循了链接文章的建议，尽管它们并不直接适用于我自己的问题。

使用 Bootstrap 整理应用程序 SASS 文件

Organize application SASS files using Bootstrap

css

themes

sass

bootstrap-4