我和SCSS一起工作，我有一個風格文件，叫做popover.min.scss

// popover.min.css
.popover {
     color: red;
}

.popover .left {
   left: 0;
}

這個文件來自一個庫，所以我不能修改它。但是，我必須將它包裝在另一個類中，以便每個類名都以. foo為前綴。

.foo.popover {
     color: red;
}

.foo.popover .left {
   left: 0;
}

我嘗試了各種方法，如使用selector.unify或@extend，但都不起作用。例如:

@use "sass:meta";

.foo {
    @at-root & {
         @include meta.load-css("popover");
    }
}

或者

@use "sass:meta";

%bar {
    @include meta.load-css("popover");
}

.foo {
    @extend %bar;
}

然而，這些方法并沒有產生預期的結果。

它產生了這個結果

.foo .popover {
     color: red;
}

.foo .popover .left {
   left: 0;
}

因為圖書館只讓我加了一個和他們同等級的班級。福。popover是不可取的，只有我可以通過生產. foo.popover(相同級別)來實現我的目標