时间戳

首页 > 解决方案 > 在 bootstrap 4 自定义中导入哪些部分

css - 在 bootstrap 4 自定义中导入哪些部分

问题描述

我目前在我的应用程序中使用引导程序，我只想覆盖原色，如下面的 scss 文件所示：

// Custom.scss

$theme-colors: (
    "primary": #243B55
);

// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

除此之外，我只想使用引导程序提供的常规定制。但是，由于我在最后一行中包含了所有引导程序，因此我生成的结果 css 文件将包含所有引导程序代码，这会使我的应用程序变慢。我正在考虑只导入必要的东西以确保覆盖原色，并使用 CDN ( <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">) 包含引导库的其余部分。但是，我无法找出我需要在我的 scss 文件中导入哪些特定内容（https://getbootstrap.com/docs/4.0/getting-started/theming/给出了一个列表，但我不确定哪些是必要的）。如果这是使应用程序更快的有效策略，我需要在底部的 scss 文件中导入什么以确保仅覆盖原色？

标签： csstwitter-bootstrapbootstrap-4sass

解决方案

您需要覆盖的变量是$primary. 您可以在导入引导代码之前放置所有变量覆盖。

$theme-colors将获得覆盖的值，并将生成具有默认变量值的代码：$primary.

因此，您可以将代码替换为：

$primary: #243B55;

推荐阅读