时间戳

首页 > 解决方案 > 如何在不编辑引导 css 的情况下用 sass 修改引导程序 4

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

问题描述

我正在使用引导 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">

我添加了名为$tertiarylike的新颜色变量$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
    );

主文件

@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";

标签： htmlcsstwitter-bootstrapsass

解决方案

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

推荐阅读