bootstrap4&；SCSS-基于基类的Overide主

我正在构建一个基于一个框架的多站点应用程序，使用带Webpack的Bootstrap4

我想根据body元素上的基类动态地更改Bootstrap的一些变量。i、 e:

.class1{
    $theme-colours: (
        primary: red,
    );
 }

.class2{
    $theme-colours: (
        primary: blue,
    );
 }

然后：

红色文本

以及：

蓝色文本

这在SASS中可能吗？我尝试过使用mixin，但没有成功

您必须使用各种Bootstrap 4主题颜色函数/mixin“重建”

-primary

类。原色更改可以进入自定义的

@mixin

，从而更容易构建每个主“主题”：

更进一步，您可以将“$customthemes”放在地图中，然后生成主题类

$customthemes: (
  "theme1": purple,
  "theme2": cyan,
  "theme3": orange
);

@each $themeName, $color in $customthemes {
  .#{$themeName} {
    @include build-primary-classes($color);
  }
}

---

然后，如果您正在使用Webpack，请将

$customthemes

映射传递到extract text Webpack插件和SASS加载程序。使用

数据

选项传入$customthemes

网页包配置：

     ....
     use: extractSass.extract({
         use: [

                  {
                    loader: "sass-loader",
                    options: {
                      allChunks: true,
                      data: '$customthemes:("theme1":purple,"theme2":pink,"theme3":red);'
                    }
                }]
         })
      .....

---

只要记住，如果你有太多的$customthemes，CSS就会变得非常大。我更喜欢使用SASS生成单独的

theme.css

文件，然后根据需要在HTML头部引用任何

theme.css

相关：

---

如果您使用web pack，则选择“是”js@Noni知道怎么做吗？

@mixin build-primary-classes($color) {
    @include bg-variant(".bg-primary", $color);

    .btn-primary {
        @include button-variant($color, $color);
    }

    .btn-outline-primary {
        @include button-outline-variant($color);
    }

    @include text-emphasis-variant(".text-primary", $color);

    .border-primary {
        border-color: $color !important;
    }
}


.theme1 {
    @include build-primary-classes($purple);
}

.theme2 {
    @include build-primary-classes($red);
}

$customthemes: (
  "theme1": purple,
  "theme2": cyan,
  "theme3": orange
);

@each $themeName, $color in $customthemes {
  .#{$themeName} {
    @include build-primary-classes($color);
  }
}

     ....
     use: extractSass.extract({
         use: [

                  {
                    loader: "sass-loader",
                    options: {
                      allChunks: true,
                      data: '$customthemes:("theme1":purple,"theme2":pink,"theme3":red);'
                    }
                }]
         })
      .....