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