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

我们正在vue.js中开发一个MVP，我们决定使用bootstrap以一致的方式对元素进行样式化

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

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

问题是：

我们如何设置我们的环境，使引导sass代码输出干净和非冗余的css代码？ 详情：

引导加载自己的

\u buttons.scss

文件

我们正在加载我们自己的“theme”

\u buttons.scss

文件，在bootstrap的一个文件之后，我们设法使css具有更高的特异性

我们运行sass代码编译器（在节点sass上）

输出css包含引导样式和按钮的主题样式。 （作为示例，请参见以下屏幕截图）

正如您所看到的，我们自己的按钮样式是按预期应用的，但我们仍然继承了bootstrap的原始样式

---

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

---

更新：

我正在使用的UI使用了一些直接来自引导的类，显然还有一些特定于我们自己的应用程序的类

有时，这些类是覆盖引导默认样式所必需的。
我们不仅需要覆盖颜色（可以通过

\u variables.scss

自定义），还需要覆盖其他一些css属性

我们发现自己在浏览器中呈现重复的css代码，其中应用了我们自己的样式，也应用了默认引导生成的样式，但由于其特殊性较低，因此永远不会应用该样式

---

我想知道是否有一种方法可以避免编译不需要在浏览器中呈现的sass代码，同时避免在

/node_modules/

中“触摸”引导代码。下面是如何覆盖引导（4.x）默认值的

检查来源 首先，查看bootstrap.scss内部，您可以看到框架是如何逐个组件构建的。若你们愿意，你们可以注释掉你们不需要的可选组件，来缩小Boostrap的尺寸。但现在不要这样做

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

创建自定义文件 不要编辑原始源文件，而是创建一个新的源文件，我们称之为myproject.scss，位于引导源文件夹之外的其他位置。通过将所有更改分开，我们使将来的任何引导升级都变得容易

添加变量覆盖 现在，您可以开始复制要更改的变量。请注意，\u variables.scs中的变量具有

！默认

标志，这意味着它们可以在其他地方被覆盖。例如，如果您想要一种不同的二级颜色，您会发现它被定义为

$secondary

，因此使用一个新值将其添加到myproject.scss：

$secondary: #dd5679;

添加任意数量的变量替代

导入引导 之后，将引导导入文件。要么采取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个导入，“函数”、“变量”和“mixin”是核心组件，不是可选组件；不要排斥他们

添加项目样式 之后，添加您自己的样式。如果数量很大，请将它们组织到它们自己的部分文件中，例如\u mybuttons.scss（部分文件的名称以下划线开头），然后导入它们

@import "mybuttons";

您的自定义引导源文件现在已准备就绪

编译为CSS

---

生成的myproject.css文件是您想要加载的文件，而不是原始的引导css文件。

这是css通常的工作方式，因为它是“层叠样式表”。并且通常一点也不有害。但是，如果您查看SCSS主题选项，您可以使用变量覆盖定义引导编译时使用的颜色，因为您特别希望使用自己的默认值覆盖引导，而不是使用级联规则扩展默认引导。我明白您的意思，谢谢您的回答。我修改了我的问题，因为问题不仅仅是关于颜色，还涉及任何其他复制的css规则集。请参阅我问题中的“更新”部分。在这一点上，我将开始质疑引导本身的使用。它们的布局和命名约定是有用的，但是如果您不仅仅是要创建主题，那么您可能希望放弃库本身。我不知道他们的变量覆盖是否支持您想要的定制级别。我同意@worc的说法，您所描述的是级联样式，是CSS的设计。似乎您正试图通过删除自己的引导规则来进行微性能优化。如果您希望能够使用引导和您自己的主题，请创建从默认值继承的单独css规则。ie：将

.btn secondary

替换为您自己的

.btn主题

规则。因此，仅应用您自己的样式，而不会与引导冲突。或者，用自己的组件替换覆盖的各个引导组件，这样就不会编译默认组件。这不仅是微观优化，还可以减少技术债务和纯粹的精神开销。其他