SCSS中无需预编译，解决选择器内导入文件的嵌套编译异常问题咨询

嘿，这个问题我之前处理过，确实挺让人挠头的——SCSS在嵌套选择器里的@import行为经常会和我们的预期跑偏，尤其是当导入的文件里用到&引用父选择器的时候。

问题根源 #

你碰到的核心问题是：当在html.dark嵌套里直接使用@import时，SCSS会把导入内容里所有的&都替换成当前的父选择器html.dark，而不是把整个导入的样式规则都嵌套在html.dark下面。这就导致像.btn-check + &这样的选择器被错误编译成.btn-check + html.dark...，而不是我们想要的html.dark .btn-check +...。

最优解决方案（单次编译，无需预编译） #

这里有两个可行的SCSS原生技巧，根据你是否能修改导入文件来选择：

方案1：修改原导入文件为Mixin（推荐，更清晰）

把_concatbootstrap-dark.scss的内容全部包裹在一个Mixin里：

// _concatbootstrap-dark.scss
@mixin bootstrap-dark-styles {
  // 原文件中的所有样式代码，包括带&的选择器
  .btn {
    color: #fff;
    .btn-check + & {
      background-color: #222;
    }
  }
  // 其他所有样式规则...
}

然后在主SCSS文件中，在嵌套选择器里调用这个Mixin：

html.dark {
  @include bootstrap-dark-styles;
}

方案2：不修改原文件，用中间Mixin包裹

如果原导入文件是第三方资源无法修改，可以创建一个中间Mixin来包裹导入操作：

// 新建一个_dark-style-wrapper.scss文件
@mixin dark-style-wrapper {
  @import "_concatbootstrap-dark";
}

然后在主文件中调用这个中间Mixin：

html.dark {
  @include dark-style-wrapper;
}

为什么这个方法有效？ #

当你把@import放在Mixin内部，再在嵌套选择器里调用Mixin时，SCSS会把Mixin里的所有样式规则整体嵌套在html.dark下面。而Mixin内部的&会按照原文件里的上下文解析（也就是指向原文件里的父选择器，比如.btn），这样就完美得到了你预期的html.dark .btn-check + .btn这类选择器。

这个方案完全不需要预编译，一次就能完成编译，是SCSS原生支持的可靠技巧。

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