使用 less 将 css 文件导入为块级导入

Question

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

---

如果你有一个文件，“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)只是“按原样”注入导入的文件而不解析它，因此规则集中此类导入的结果是未定义的（像您的示例中那样无效的CSS）。要获得您需要的内容，请使用(less)选项，例如：

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