Css 是否根据主体类别覆盖引导4中的主颜色？_Css_Twitter Bootstrap_Sass_Bootstrap 4

Css 是否根据主体类别覆盖引导4中的主颜色？

css twitter-bootstrap sass bootstrap-4

Css 是否根据主体类别覆盖引导4中的主颜色？,css,twitter-bootstrap,sass,bootstrap-4,Css,Twitter Bootstrap,Sass,Bootstrap 4,我有一个网站，每个部分都有自己的原色我想在Bootstrap4的Sass代码中添加一些内容，根据我设置的body类覆盖主颜色我有这个，但到目前为止还不起作用： $theme-colors: () !default; $theme-colors: map-merge(( // primary: $blue, // secondary: $gray-600, success: $green, info: $cyan, warning: $yellow,

我有一个网站，每个部分都有自己的原色

我想在Bootstrap4的Sass代码中添加一些内容，根据我设置的body类覆盖主颜色

我有这个，但到目前为止还不起作用：

$theme-colors: () !default;
$theme-colors: map-merge((
    // primary: $blue,
    // secondary: $gray-600,
    success: $green,
    info: $cyan,
    warning: $yellow,
    danger: $red,
    light: $gray-100,
    dark: $gray-800
), $theme-colors) !default;

// override according to portal
html {
    &.portal-1 {
        $theme-colors: map-merge((
            primary: #f1b36d
        ), $theme-colors);
    }

如何在Bootstrap 4的Sass文件中实现这一点？

您不能更改已在客户端动态转换为静态CSS的Sass变量。但是，要构建主题系统，可以应用以下选项之一：

1。生成独立主题

在构建系统中放置一个主题参数，该参数将生成不同的主题CSS，例如：

grunt build sass--theme=brown

var themes = {
    "default": "https://bootswatch.com/flatly/bootstrap.min.css",
    "cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css"
}

// Use something like this to add theme: (You can also append instead of overriding whole head html)
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML    += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;

制作这样的scss文件结构

- vendors
  - bootstrap
    - stylesheets /*[Bootstrap 4 official sass files]*/
      - _bootstrap.scss
- scss
  - themes
    - _theme-1.scss
    - _theme-2.scss
  - _variables.scss
  - styles.scss
  - portal-1.scss
  - portal-2.scss

_变量.scss styles.scss themes/_theme-1.scss themes/_theme-2.scss portal-1.scss portal-2.scss 在sass编译之后，我们将得到3个文件styles.css、portal-1.css和portal-2.css。默认情况下使用style.css和其他包含在标题标记中的样式来创建主题

<html>
    <head>
         <link href="styles.css" rel="stylesheet" />
         <link href="portal-1.css" rel="stylesheet" />
    </head>
    <body>
        <button class="btn btn-primary">BUTTON</button>
        <div class="portal-1">
            <button class="btn btn-primary">BUTTON</button>
        </div>
    </body>
</html>


按钮
按钮

这里有一个很好的解释，说明了如何做到这一点：请记住，Sass在运行之前被编译成静态CSS，因此它永远不会了解浏览器中发生的事情。因此，如果您询问是否可以根据页面上存在的类覆盖引导的Sass文件中的变量，则不能。您需要修改sas以级联到该类的所有受影响元素中，并在整个过程中替换变量。或者，您可以查看CSS自定义变量，但目前还不完全支持浏览器。

@import "variables";
@import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */

@import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary:         #428bca
$brand-success:         #5cb85c;
$brand-info:            #5bc0de;
$brand-warning:         #f0ad4e;
$brand-danger:          #d9534f;
$body-bg:               #eff;

@import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary:         #C04848;

@import "themes/_theme-1";
/* change style with new variable bootstrap default components ... */
.portal-1 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* custom style overrides ... */
}

@import "themes/_theme-2";
/* change style with new variable bootstrap default components ... */
.portal-2 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* custom styles from style.scss overrides ... */
}

<html>
    <head>
         <link href="styles.css" rel="stylesheet" />
         <link href="portal-1.css" rel="stylesheet" />
    </head>
    <body>
        <button class="btn btn-primary">BUTTON</button>
        <div class="portal-1">
            <button class="btn btn-primary">BUTTON</button>
        </div>
    </body>
</html>