使用 Bootstrap 组织应用程序 SASS 文件答案

【问题标题】：Organize application SASS files using Bootstrap使用 Bootstrap 组织应用程序 SASS 文件
【发布时间】：2021-02-21 09:47:02
【问题描述】：

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

我已经建立了以下文件结构：

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

我遇到的问题是 global.scss - 导入 Bootstrap 的那个 - 然后由 site.scss 以及其他文件（如特定于页面的 SCSS 文件）导入。因此，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 样式。

【问题讨论】：

为什么要在site.scss 中导入global.scss？ site.scss 中还有什么？它是否引用引导变量？
我刚刚编辑了问题，添加了site.scss 的部分代码。 site.scss 以及特定页面的 SASS 文件将使用来自 Bootstrap 和我自己的变量和 mixin（theme.scss 和 global.scss）

标签： css bootstrap-4 sass themes

【解决方案1】：

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

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

首先，我创建了两个用于导入 Bootstrap 的 SASS 文件（类似于本文对 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/_config.scss。 **

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

【讨论】：