less - 使用 less 将 css 文件导入为 block 级导入

Question

有没有办法通过使用 @import 将 .css 文件的规则嵌套在选择器下？像导入 .less 文件时一样吗？

如果你有一个文件，“x.less”

#x {
    color: #000;
}

和文件“main.less”

.scope {
    @import "x.less";
}

编译“main.less”会导致

.scope #x {
  color: #000;
}

但是，如果你有
“y.css”

#y {
    color: #111;
}

并将“main.less”更改为

.scope {
    @import "y.css";
}

编译“main.less”会导致

.scope {
  @import "y.css";
}

如果你有
“z.css”

#z {
    color: #222;
}

并将“main.less”更改为

.scope {
    @import (inline) "z.css";
}

编译“main.less”会导致

.scope {
  #z {
  color: #222;
}

Answer 1

(inline)只是“按原样”注入(inject)导入的文件而不对其进行解析，因此在规则集中进行此类导入的结果是未定义的(如您的示例中的无效 CSS)。
要获得您需要的东西，请使用 (less) 选项，例如:

.scope {
    @import (less) "z.css";
}