Sass 在不同视图的引导中获得不同的主题_Sass_Bootstrap 4_Modularization

Sass 在不同视图的引导中获得不同的主题

sass bootstrap-4

Sass 在不同视图的引导中获得不同的主题,sass,bootstrap-4,modularization,Sass,Bootstrap 4,Modularization,我想用bootstrap对页面进行主题化，但在一些页面中，我只想对按钮进行主题化，并保持输入字段的原样，而在其他页面中，我想用另一种方式进行主题化，只对输入字段而不是按钮进行主题化我希望能写这样的东西在第1页： @导入input-theming.css ... 使用按钮的默认样式第2页： @导入按钮主题化.css ... 对输入使用默认样式我已经考虑过将我的in组件模块化，这样我在每个组件中都会对不同的部分进行主题化，比如输入、按钮、表格等等。。。等等，但是我必须为这些模块的每个组合创建

我想用bootstrap对页面进行主题化，但在一些页面中，我只想对按钮进行主题化，并保持输入字段的原样，而在其他页面中，我想用另一种方式进行主题化，只对输入字段而不是按钮进行主题化

我希望能写这样的东西

在第1页：

@导入input-theming.css ... 使用按钮的默认样式

第2页：

@导入按钮主题化.css ... 对输入使用默认样式

我已经考虑过将我的in组件模块化，这样我在每个组件中都会对不同的部分进行主题化，比如输入、按钮、表格等等。。。等等，但是我必须为这些模块的每个组合创建一个custom.scss文件，这看起来很复杂

虽然我在custom.scss中对它们进行了不同的主题设置，但我想要的是一种返回引导的某些部分的默认行为的方法。如果不生成不同的custom.scss文件，只对引导的不同部分进行主题化，这是可能的吗？

SASS允许您嵌套导入。因此，您可以为每个“主题”（自定义组合）使用父类，然后将适当的主题CSS类添加到每个页面的HTML父容器（HTML、正文、容器等）。这允许您将所有SASS覆盖/更改保存在一个

custom.scss

文件中

@import "bootstrap/functions";
@import "bootstrap/mixins";
@import "bootstrap/variables";

.theme-1 {
    /* change the button style */
    .btn-primary {
        @include button-variant(green, green);
    }
}

.theme-2 {
    /* change the input style */
    $input-bg: #ddd;
    @import "bootstrap/forms"
}

@import "bootstrap"

HTML第1页（自定义按钮）


按钮

HTML第2页（自定义输入）


按钮

请使用您迄今为止尝试过的代码或您期望的可视化内容来澄清问题。好的，我添加了一些代码，我尝试按照您的建议执行，但导入引导/变量时出现问题。显然，该文件确实将$input bg映射到$input focus bg。因此，为了获得与我只在顶级代码中声明变量时相同的结果，我需要在声明$input bg之后导入引导/变量。另一方面，我需要在@import“bootstrap/forms”之前导入它。这意味着我需要将其纳入主题2课程。但这似乎是不允许的：在..之后您不会导入变量。。你以前会进口的！它们需要引用您重新定义的变量，那么映射会发生什么呢？

<body class="theme-1">    
    <div class="container py-2">
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Username">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="addon">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<body class="theme-2">    
    <div class="container py-2">
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Username">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="addon">Button</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>