1

我已经建立了一个 blazor 组件库，它定义了几个 blazor 组件 + 隔离的 CSS 文件。这些 css 文件是从 sass 文件中转译的，在这些文件中我使用引导程序的 mixins 指定引导程序网格系统，例如 @include make-col-ready(); 或@include make-col(4);。

这一切都运行良好，并且 CSS 和 blazor 组件能够被我的 blazor webassembly 应用程序使用，我使用组件库的项目引用依赖项设置了该应用程序。

现在理想的情况是，如果我可以让组件库中的隔离 CSS 充当默认样式，但我可以在使用应用程序中覆盖此样式（也包括引导混合）。理想情况下，我希望在我的组件库中设置 !default sass 变量，用于确定是使用默认 css，还是根本不包含它。我已经尝试过类似下面的代码片段（只是一个简单的草图，不要太认真），但据我了解，在将这些变量编译为 css 以供消费应用程序导入之前，无法覆盖这些变量。

/* Component css */
$defaultComponentCss: true !default;


@mixin foobar($defaultComponentCss) {
    @if($defaultComponentCss) {
        border-radius: 10px;
        background-color: red;
        border-top-right-radius: 83px;
    }
}

.main-content {
    @include foobar($defaultComponentCss);
}

/* SCSS file in the consuming application*/
$defaultComponentCss: false;

/*[non-default styling]*/

TL;博士; 有没有办法设置一个 blazor 组件库，以便使用应用程序可以覆盖现有的隔离 css（在组件库中），以便可以使用不同的引导网格混合？

我希望我提供了足够的上下文，如果没有，我很乐意提供更多。

提前致谢！

4

0 回答 0