Sass：如何將嵌套導入選擇器與父選擇器合並？

Question

背景

我有一個現有的網站，我想在其中導入 Bootstrap CSS styles。 styles 發生沖突，所以我想 scope 規則。

例子

// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}

// ---

// my-styles.scss

.my-selector {
   @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
}

這導致.my-selector.modal ，但我想要.my-selector.modal 。

我想避免復制粘貼樣式規則。 如果我能以某種方式使用@extend 做到這一點，那就太好了。

感謝您的任何建議。

Answer 1

我不確定我是否完全理解這個問題，因為// node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_modals.scss不是當前/標准 Bootstrap SASS 文件的父級。

如果您使用的是最新的 Bootstrap， _modal.scss包含所有 SASS 模態源。 因此，如果您想將所有模態規則/類（.modal、.modal-header、.modal-body 等）@import 到另一個父my-selector class 它將是...

@import "bootstrap";

.modal.my-selector {
    & {
        @import "bootstrap/modal";
    }
}

SASS 演示： https://codeply.com/p/XjYSfp0s8H