如何在不编辑引导 css 的情况下用 sass 修改引导程序 4答案

【问题标题】：How to modify bootstrap 4 with sass without editing bootstrap css如何在不编辑引导 css 的情况下用 sass 修改引导程序 4
【发布时间】：2018-08-19 10:06:30
【问题描述】：

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

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

如下图

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

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

: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

_variables.scss

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

main.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";

【问题讨论】：

我没有得到你的问题，你得到你正在寻找的 css 输出了吗？问题是“如何保存”？
好的，我有两个bootstrap css，一个是bootstrapcdn，另一个是sass（main.css）修改的。 main.css 还包括引导默认类和由 sass 创建的新/覆盖类。我需要将覆盖/新类保存为单独的 css 文件。如何使用 sass 将覆盖类保存为新的 css？。
您现在使用哪个 scss 编译器？例如如果您使用常规 scss CLI 编译器，则在 scss --watch assets/scss:assets/css --style=compressed 处指定 css 路径。此命令监视 /assets/scss 文件夹中的更改并将缩小的 css 保存到 /assets/css 文件夹中，然后从该文件夹中包含 css 请注意，您需要为 sass-lang.com/install 安装 ruby 和 scss
我正在使用 sass，它运行良好，编译或覆盖文件没有问题。问题是编译的css还包括所有默认类+添加/更新的类。我不想在新编译的 css 中使用 bootstrap 默认类，因为我已经包含了 bootstrap cdn。我只需要编译后的css中更新/添加的类。

标签： html css twitter-bootstrap sass

【解决方案1】：

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

【讨论】：