如何优化引导程序以避免呈现未使用的CSS代码

Question

我们正在vue.js中开发一个MVP，我们决定使用bootstrap使元素样式保持一致。

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

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

问题：

我们如何设置环境以使Bootstrap Sass代码输出干净且非冗余的CSS代码？

详细信息：

1. 引导程序会加载自己的_buttons.scss文件
2. 在引导程序之后，我们正在加载自己的“主题” _buttons.scss文件，并且设法使CSS具有更高的特异性。
3. 我们运行sass代码编译器（在node-sass上）
4. 输出css包含两者引导样式和我们自己的按钮主题样式。 （例如，请参见以下屏幕截图）

您会看到我们自己的按钮样式已按预期应用，但我们仍然保留了引导程序的原始样式。

---

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

---

更新：

我正在使用的UI直接使用了一些自举类，并且显然使用了某些特定于我们自己的应用程序的类。

有时这些类对于覆盖引导程序默认样式是必需的。
我们不仅需要覆盖颜色（可以通过_variables.scss进行自定义），还需要覆盖其他一些CSS属性。

我们发现自己在浏览器中呈现的重复css代码中苦苦挣扎，在其中应用了我们自己的样式，并且默认的引导程序生成样式由于其低特异性而永远不会应用。

我想知道是否有一种方法可以避免编译不需要在浏览器中呈现的Sass代码，并且同时避免“触摸” ./node_modules/中的引导程序代码

Answer 1

这是您覆盖Bootstrap（4.x）默认设置的方式。

检查来源

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

接下来，查看 _variables.scss 。略过此文件，应该清楚在此定义了所有可自定义的Bootstrap样式，包括颜色。因此，您可以使自定义颜色不仅适用于按钮，而且适用于整个框架。同样，您可以立即在此处开始更改所需的变量...但是不要这样做，因为有最佳实践。

创建自定义文件

创建一个新的源文件，而不是编辑原始源，我们将其命名为 myproject.scss ，而不是Bootstrap源文件夹。通过将所有更改分开保存，我们使将来的所有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";

前三个输入，“函数”，“变量”和“ mixins”是核心组件，不是可选组件；不要排除它们。

添加项目样式

然后，添加您自己的样式。如果您有大量文件，请将其组织到自己的部分文件中，例如 _mybuttons.scss （以下划线开头的部分文件的名称），然后导入它们。

@import "mybuttons";

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

编译为CSS

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