css - 如何优化 Bootstrap 以避免渲染未使用的 css 代码

Question

我们正在 vue.js 中开发 MVP，我们决定使用 bootstrap 以一致的方式设置元素的样式。

现在我们开始将皮肤/主题添加到我们的单页应用程序中，我们发现页面上呈现的 css 存在问题。

我们通过使用更高特异性的 css 选择器成功地覆盖了样式，但我们希望通过删除未使用的“基本”引导 css 代码来优化浏览器中呈现的输出代码。

问题:

我们如何设置我们的环境来使 bootstrap sass 代码输出干净且无冗余的 css 代码？

详细信息:

1. Bootstrap 加载它自己的 _buttons.scss 文件
2. 我们在 Bootstrap 之后加载我们自己的“主题”_buttons.scss 文件，我们设法让我们的 css 具有更高的特异性。
3. 我们运行 sass 代码编译器(在 node-sass 上)
4. 输出的 CSS 包含 BOTH Bootstrap 样式和我们自己的按钮主题样式。 (例如，请参见以下屏幕截图)

如您所见，我们自己的按钮样式已按预期应用，但我们仍沿用了 Bootstrap 的原始样式。

---

我们希望仅在浏览器中呈现我们的样式。

---

更新:

我正在处理的 UI 使用一些直接来自 bootstrap 的类，显然还有一些特定于我们自己的应用程序的类。

有时这些类是覆盖 Bootstrap 默认样式所必需的。
我们不仅需要覆盖颜色(可通过 _variables.scss 自定义)，还需要覆盖其他一些 css 属性。

我们发现自己在浏览器中呈现的重复 css 代码中苦苦挣扎，其中应用了我们自己的样式以及默认的 Bootstrap 生成的样式，这些样式永远不会应用，因为它的特异性很低。

我想知道是否有办法避免编译不需要在浏览器中呈现的sass代码，同时避免“接触”中的bootstrap代码。/node_modules/.

Answer 1

这是覆盖 Bootstrap (4.x) 默认值的方法。

检查来源

首先，查看 bootstrap.scss 内部，您可以在其中逐个组件地了解框架的构建方式。如果愿意，您可以注释掉不需要的可选组件，以缩小 Boostrap 的尺寸。但现在不要这样做。

接下来，查看 _variables.scss。浏览这个文件，应该清楚所有可自定义的 Bootstrap 样式都在这里定义，包括颜色。因此，您可以让您的自定义颜色不仅适用于按钮，而且适用于整个框架。同样，您现在可以开始更改您想要的变量……但不要这样做，因为有一个最佳实践。

创建自定义文件

不是编辑原始源，而是创建一个新的源文件，我们称之为 myproject.scss，位于 Bootstrap 源文件夹之外的某个地方。通过将所有更改分开，我们使任何 future 的 Bootstrap 升级变得容易。

添加变量覆盖

现在您可以开始复制要更改的变量。请注意，_variables.scss 中的变量具有 !default 标志，这意味着它们可以在其他地方被覆盖。例如，如果你想要不同的辅助颜色，你会发现它被定义为 $secondary，因此将它添加到 myproject.scss 并使用新值:

$secondary: #dd5679;

根据需要添加任意数量的变量覆盖。

导入 Bootstrap

之后，将 Bootstrap 导入到文件中。要么采用 bootstrap.scss 批发:

@import "relative/path/to/bootstrap/bootstrap";

或者复制粘贴 bootstrap.scss 的内容，更新路径名，并注释掉不需要的组件:

@import "relative/path/to/bootstrap/functions";
@import "relative/path/to/bootstrap/variables";
@import "relative/path/to/bootstrap/mixins";
...
// @import "relative/path/to/bootstrap/popover";
// @import "relative/path/to/bootstrap/carousel";
@import "relative/path/to/bootstrap/utilities";
@import "relative/path/to/bootstrap/print";

前 3 个导入，“functions”、“variables”和“mixins”是核心组件而不是可选组件；不要排除它们。

添加元素样式

之后，添加您自己的样式。如果你有很多，将它们组织成自己的部分文件，例如_mybuttons.scss(部分文件名以下划线开头)，导入。

@import "mybuttons";

您的自定义 Bootstrap 源文件现已准备就绪。

编译成CSS

生成的 myproject.css 文件是您要加载的而不是原始 Bootstrap CSS 文件。