html - 如何在不编辑 bootstrap css 的情况下使用 sass 修改 bootstrap 4

Question

我正在使用 bootstrap CDN，我需要通过为修改后的代码创建新的 css 来使用 sass 覆盖 bootstrap。

例如:我有两个bootstrap css，一个是bootstrapcdn，另一个是sass修改的(main.css)。 main.css 还包括 Bootstrap 默认类和由 sass 创建的新/覆盖类。我需要将覆盖/新类保存为单独的 css 文件。如何使用 sass 将覆盖类保存为新的 css？

喜欢下面

<link rel="stylesheet" href="/path/to/bootstrap-cdn.css">
<link rel="stylesheet" href="/path/to/modified.css">

我添加了名为 $tertiary 的新颜色变量，如 $primary，这是添加或修改 Bootstrap 类，如

:root { --tertiary: #66F;} 
.list-group-item-tertiary {} 
.btn-outline-tertiary {}

我需要将更新后的代码保存到新的 CSS 中。

下面是我的文件和它的结构(如果需要的话)

|-- \bootstrap-scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|-- \custom-scss
|   |   |-- _custom.scss
|   |   |-- _variable.scss
|   |   |-- main.scss

_变量.scss

    $tertiary:          #66F;
    $theme-colors: () !default;
    $theme-colors: map-merge(
      (
        "tertiary":    $tertiary),
      $theme-colors
    ); 

主.scss

@import "variables";
// Bootstrap and its default variables
@import "../bootstrap-scss/functions";
@import "../bootstrap-scss/variables";
@import "../bootstrap-scss/mixins";
// Optional
@import "../bootstrap-scss/ all scss files ";
@import "custom";

Answer 1

确保最后选择具有首选样式的文件。您还可以将“!Important”添加到首选类中，尤其是在您需要覆盖时。