css - 将 LESS 文件导入范围会产生不正确的选择器顺序

Question

我想将 LESS 文件的内容包装到一个范围中。 LESS 的最新版本支持这一点，但生成的 CSS 中的某些选择器顺序不正确。我已经确定是表达式末尾的父选择器导致了这个问题。

3rd-party.less

.mixin() {
    .container > & {
        position: absolute;
    }
}
.class1 {
    width: 200px;
}
.class2 {
    .mixin();
}

wrapped.less

.wrapper {
    @import "3rd-party.less";
}

构建 wrapped.less 生成以下 CSS:

.wrapper .class1 {
  width: 200px;
}
.container > .wrapper .class2 {
  position: absolute;
}

虽然我想得到这个:

.wrapper .class1 {
  width: 200px;
}
.wrapper .container > .class2 {
  position: absolute;
}

是否可以在不修改的情况下得到想要的结果3rd-party.less?

Answer 1

我通过构建 3rd-party.less 并导入结果实现了正确的选择器顺序:

.wrapper {
    @import (less) "3rd-party.css";
}

此解决方案生成一个中间文件，但最终输出完全符合预期。