时间戳

首页 > 解决方案 > 如何优化引导程序以避免渲染未使用的 css 代码

css - 如何优化引导程序以避免渲染未使用的 css 代码

问题描述

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

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

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

问题：

我们如何设置我们的环境以使引导 sass 代码输出干净且非冗余的 css 代码？

细节：

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

如您所见，我们自己的按钮样式已按预期应用，但我们仍然继承了引导程序的原始样式。

我们希望只在浏览器中呈现我们的风格。

更新：

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

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

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

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

标签： csssassbootstrap-4

解决方案

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

检查源

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

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

创建自定义文件

与其编辑原始源代码，不如创建一个名为myproject.scss的新源文件，该文件位于 Bootstrap 源文件夹之外的某个位置。通过将所有更改分开，我们可以轻松地进行任何未来的 Bootstrap 升级。

添加变量覆盖

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

$secondary: #dd5679;

根据需要添加尽可能多的变量覆盖。

导入引导

之后，将 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 文件。

推荐阅读