Question

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

例如：我有两个bootstrap 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";

Answer 1

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

如何在不编辑Bootstrap CSS的情况下使用Sass修改Bootstrap 4

1 个答案: