如何实现无需类名的SCSS作用域（scoped）导入，避免样式泄漏？

• 出现样式泄漏的核心原因是SCSS旧版@import的固有编译逻辑：只要被导入的SCSS文件里写了顶层的裸元素选择器（比如文件A里直接定义的ion-content {}规则），编译后这些规则会被直接提升为全局样式，完全不会继承导入它的组件的scoped作用域。哪怕覆盖层组件本身开启了scoped，被导入的裸选择器也会脱离组件作用域，生成独立的全局CSS规则——这也是为什么覆盖层关闭、对应DOM被销毁后，全局样式表中的规则依然留存，持续影响所有页面的ion-content元素。

• 方案1：用SCSS占位选择器隔离导入规则，结合@extend绑定作用域
  靠SCSS本身的特性就能把导入的样式限制在组件作用域内，全程不需要手动编写自定义类名：
  1. 改写文件A的内容，不要把ion-content规则直接放在文件顶层，而是把规则包进SCSS的占位选择器中，避免导入时自动生成全局规则：

     // 文件A（style.scss）
     %scoped-content-padding {
       ion-content {
         --padding-end: 10px;
         --padding-start: 10px;
       }
     }
     

  2. 在文件B（覆盖层组件的scoped样式块）中，不再直接@import文件A，而是通过@use引入文件后，把占位选择器的规则扩展到组件自身的作用域根节点下：

     // 文件B（组件scoped样式块内）
     @use "../style.scss" as *;
     :host {
       @extend %scoped-content-padding;
     }
     

  这种写法编译完成后，ion-content的规则会自动带上当前组件的scoped属性选择器，变成仅在覆盖层DOM存在时才能匹配的作用域规则；等覆盖层关闭、DOM被移除后，带scoped属性的匹配条件消失，样式自然失效。
• 方案2：用现代SCSS模块语法替代旧版@import，配合作用域嵌套隔离
  旧版@import会无差别把所有被导入的规则提升到全局顶层，换成SCSS官方推荐的@use、@forward语法后，你可以把被导入的规则直接嵌套在组件的作用域根节点下，阻止规则被提升到全局：

  // 文件B（组件scoped样式块内）
  :host {
    @at-root #{selector-parse("@forward ../style.scss")} {
      // 导入的所有规则都会被限制在当前组件的作用域匹配范围内
    }
  }
  

  需要注意的是，Ionic的覆盖层（modal、popover、action-sheet等）是独立挂载在body下的DOM节点，本身就带有组件scoped属性，只要把导入的全局规则嵌套在这些带scoped属性的根节点选择器内部，编译后的选择器就不会泄漏到全局。
• 避坑提醒：不要把裸的全局选择器写在被导入的SCSS文件顶层，否则不管在哪个组件里导入，这些规则都会直接变成全局CSS，完全不受组件scoped的限制。

内容的提问来源于stack exchange，提问作者Shifenis